<template>
  <div class="plan">
    <div class="plan-box">
      <!--   视频流   -->
      <div id="player"
           ref="content"
           class="player"
           @drop="onDrop()"
           @mousemove="allowedHover=true"
           @dragover.prevent="onDragOver"
      ></div>
      <div @mousemove="allowedHover=false">
        <!-- 顶部菜单 -->
        <div class="plan-top-menu">
          <ul>
            <li class="top-menu-title">{{ reportPlanName }}</li>
            <li @click="pageEdt()">
              <i class="ri-input-method-line"></i><br/>图文管理
            </li>
            <li @click="infoTreeEdt()">
              <i class="ri-stack-line"></i><br/>图层树
            </li>
            <li @click="submenuGYMN">
              <i class="ri-haze-line"></i><br/>光影模拟
            </li>
            <li @click="submenuTQMN">
              <i class="ri-celsius-line"></i><br/>天气模拟
            </li>
            <li @click="showFastLineEdt()">
              <i class="ri-pencil-ruler-2-fill"></i><br/>快速选线
            </li>
            <li @click="getAnimationList()">
              <i class="ri-live-line"></i><br/>项目漫游
            </li>
            <li @click="tourEdt"><i class="ri-live-line"></i><br/>自制漫游</li>
            <li @click="markerEdt()"><i class="ri-flag-2-line"></i><br/>标签管理</li>
            <li @click="carEdt()"><i class="ri-car-line"></i><br/>车辆管理</li>
            <li @click="openPolylinePopup">
              <i class="ri-sketching"></i><br/>画折线
            </li>
            <li @click="openPolygonPopup">
              <i class="ri-shapes-line"></i><br/>画多边形
            </li>
            <li>
              <el-dropdown
                  :hide-on-click="false"
                  class="top-menu-other"
                  placement="bottom-start"
                  trigger="click"
                  @command="chooseCLGJ"
              >
                <span><i class="ri-ruler-line"></i><br/>测量工具</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1" icon="ri-map-pin-line">坐标</el-dropdown-item>
                  <el-dropdown-item command="2" icon="ri-space">直线</el-dropdown-item>
                  <el-dropdown-item command="3" icon="ri-git-commit-line">水平</el-dropdown-item>
                  <el-dropdown-item command="4" icon="ri-ruler-2-line">垂直</el-dropdown-item>
                  <el-dropdown-item command="5" icon="ri-shape-line">平面</el-dropdown-item>
                  <el-dropdown-item command="6" icon="ri-shape-fill">地面</el-dropdown-item>
                  <el-dropdown-item command="0" icon="ri-brush-3-fill">清除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li>
              <el-dropdown
                  :hide-on-click="false"
                  class="top-menu-other"
                  placement="bottom-start"
                  trigger="click"
                  @command="choosePQGJ"
              >
                <span><i class="ri-instance-line"></i><br/>剖切工具</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1" icon="ri-box-2-line">体剖</el-dropdown-item>
                  <el-dropdown-item command="2" icon="ri-map-2-fill">竖剖</el-dropdown-item>
                  <el-dropdown-item command="0" icon="ri-brush-3-fill">清除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li @click="checkIsPageClicked">
              <el-dropdown
                  :disabled="titleIndex === '' || pageIndex === ''"
                  :hide-on-click="false"
                  class="top-menu-other"
                  placement="bottom-start"
                  trigger="hover"
                  @command="chooseFXGJ"
              >
                <span><i class="ri-instance-line"></i><br/>分析工具</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1" icon="ri-home-gear-line">天际线分析</el-dropdown-item>
                  <el-dropdown-item command="2" icon="ri-home-wifi-line">视域分析</el-dropdown-item>
                  <el-dropdown-item command="3" icon="ri-anchor-fill">水淹分析</el-dropdown-item>
                  <el-dropdown-item command="4" icon="ri-building-3-line">通视分析</el-dropdown-item>
                  <el-dropdown-item command="5" icon="ri-community-line">开敞度分析</el-dropdown-item>
                  <el-dropdown-item command="6" icon="ri-home-heart-line">日照分析</el-dropdown-item>
                  <el-dropdown-item command="7" icon="ri-sketching">坡度坡向分析</el-dropdown-item>
                  <el-dropdown-item command="8" icon="ri-funds-line">等高线分析</el-dropdown-item>
                  <el-dropdown-item command="9" icon="ri-anchor-fill">流体仿真</el-dropdown-item>
                  <el-dropdown-item command="0" icon="ri-funds-line">清除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li @click="setRenderedCursorVisible">
              <i class="ri-baidu-line"></i><br/>鼠标修复
            </li>
            <li @click="highlightOpen=!highlightOpen"><i class="ri-lightbulb-flash-line"></i><br/>高亮</li>
            <li @click="saveReportPop">
              <i class="ri-save-3-line"></i><br/>保存
            </li>
            <li @click="redirectToReport">
              <i class="ri-logout-box-r-line"></i><br/>返回
            </li>
          </ul>
        </div>

        <!-- 弹窗 -->
        <div v-if="showPopupAddTitle" v-dialog-drag class="plan-popup-title">
          <div class="popup-box">
            <div class="popup-header">
              <span>添加标题</span>
            </div>
            <div class="add-title-index-box">
              <span>在标题:</span>
              <el-select v-model="addTitleIndex" class="add-title-index" placeholder="请选择标题">
                <el-option
                    v-for="(item,index) in titleLists"
                    :key="item.titleName"
                    :label="item.titleName"
                    :value="index">
                </el-option>
              </el-select>
              <span>后添加标题</span>
            </div>
            <div class="add-title-name-box">
              <span>标题名称:</span>
              <el-input v-model="inputTextAddTitle" class="add-title-name" placeholder="输入新标题名称"
                        type="text">
              </el-input>
            </div>
            <div class="add-title-btn-box">
              <span>(不选择默认在最后添加标题)</span>
              <button @click="addTitle">保存</button>
              <button @click="showPopupAddTitle = false">关闭</button>
            </div>
          </div>
        </div>
        <div v-show="showBCFA" v-dialog-drag class="plan-popup-plan">
          <div class="popup-box">
            <div class="popup-header">
              <span>输入方案名称</span>
            </div>
            <input v-model="inputReportName" :placeholder="reportPlanName" type="text"/>
            <hr/>
            <button @click="saveToLocalStorage">保存</button>
            <button @click="showBCFA = false">关闭</button>
          </div>
        </div>

        <div v-if="showTextEdtMenu2"
             id="myQuillEditorBox"
             v-dialog-drag-l
             :style="editorClass"
             class="plan-popup-label"
             @mouseup="saveTextLeftAndTop('myQuillEditorBox', -1)">
          <div class="plan-popup-close"><span @click="showTextEdtMenu2=false">—</span></div>
          <more-text-edt-wang id="myQuillEditor"
                              ref="myQuillEditorW"
                              :textText.sync="pageOne.textLists[textIndex].text"
                              @update="updateText">
          </more-text-edt-wang>
        </div>

        <!--  左边标题分页列表 -->
        <div v-show="showLeftEdtList" class="plan-left-menu">
          <div class="body-left-top">
            <el-tooltip class="item" content="添加标题" effect="dark" placement="top-start">
              <button @click="showPopupAddTitle = true">
                <i class="ri-menu-add-line"></i>添加标题
              </button>
            </el-tooltip>
            <el-select v-model="formWork" placeholder="" @change="setFormWork">
              <el-option
                  v-for="item in formWorks"
                  :key="item.name"
                  :disabled="item.disabled"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!--        列表 -->
          <div class="body-left-body">
            <div v-for="(title, indexF) in titleLists" :key="indexF">
              <!--     标题       -->
              <div class="left-body-title">
                <i :class="title.iconClass" @click="changeListOneIcon(title)"></i>
                <span :style="{color: title.showTitlePage? 'rgb(66, 229, 186, 0.8)': 'rgb(255,255,255, 1)',}">
                  {{ title.titleName }}
                </span>
                <el-tooltip v-if="!title.disabledType" class="item" content="删除此标题及所有分页" effect="dark"
                            placement="top-start">
                  <i class="body-title-del ri-delete-bin-2-line"
                     @click.stop="deleteTitle(indexF)"></i>
                </el-tooltip>
                <div v-else class="body-title-del"></div>
              </div>
              <!--        子项页面 -->
              <div v-for="(page, indexC) in title.pageLists" v-show="title.showTitlePage" :key="indexC"
                   class="left-body-page">
                <div :style="{color: page.showClick? 'rgb(255, 255, 255, 1)': 'rgb(255, 255, 255, 0.5)',}"
                     class="body-page-index">
                  <span>{{ indexC + 1 }}</span>
                </div>
                <div :style="{backgroundColor: page.showClick? 'rgb(66, 229, 186, 0.8)': 'rgb(12, 18, 30, 1)',}"
                     class="body-page-one">
                  <img :src="page.pageUrl" alt="分页" @click="postPageAll(indexF, page, indexC)"/>
                  <span :style="{color: page.showClick? 'rgb(255, 255, 255, 1)': 'rgb(255, 255, 255, 0.5)',}">
                    {{ page.pageName }}
                  </span>
                </div>
                <div class="body-page-option">
                  <el-tooltip class="item" content="删除此分页" effect="dark" placement="top-start">
                    <i v-if="!title.disabledType" class="ri-file-reduce-line"
                       @click.stop="deletePage(title, indexC)"></i>
                  </el-tooltip>
                  <el-tooltip class="item" content="在此分页后添加分页" effect="dark" placement="top-start">
                    <i v-if="!title.disabledType" class="ri-sticky-note-add-line"
                       @click.stop="addPage(indexF,indexC)"></i>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
          <div class="body-left-bottom">
            <el-tooltip :open-delay="500" content="收起列表" effect="light" placement="left-end">
              <i class="ri-arrow-left-double-line" @click="showLeftEdtList = !showLeftEdtList"></i>
            </el-tooltip>
          </div>
        </div>
        <div v-show="!showLeftEdtList" class="plan-left-menu-bottom">
          <div class="body-left-bottom">
            <el-tooltip :open-delay="500" content="展开列表" effect="light" placement="right-end">
              <i class="ri-arrow-right-double-line" @click="showLeftEdtList = !showLeftEdtList"></i>
            </el-tooltip>
          </div>
        </div>
        <!--   编辑页面     -->
        <div v-show="showPageEdt" class="body-right-pageEdt">
          <div class="pageEdt-top">
            <div class="top-title">
              <span>页面管理:</span>
            </div>
            <i class="ri-close-line" @click="showPageEdt = false"></i>
          </div>
          <div class="pageEdt-body">
            <el-collapse v-model="activePageEdtNames">
              <el-collapse-item name="1">
                <template slot="title">
                  <span class="body-title">标题分页</span>
                </template>
                <div class="body-one">
                  <br/>
                  <span>标题名称:</span>
                  <el-input v-model="titleName" class="input-with-select" placeholder="请输入内容">
                    <el-button slot="append" icon="el-icon-check" @click="saveTitleName"></el-button>
                  </el-input>
                </div>
                <br/>
                <div class="body-one">
                  <span>分页名称:</span>
                  <el-input v-model="pageName" class="input-with-select" placeholder="请输入内容">
                    <el-button slot="append" icon="el-icon-check" @click="savePageName"></el-button>
                  </el-input>
                </div>
              </el-collapse-item>
              <el-collapse-item name="2">
                <template slot="title">
                  <span class="body-title">页面视角</span>
                </template>
                <br/>
                <div class="body-two">
                  <el-button :plain="true" @click="saveCamera()">保存视角</el-button>
                </div>
              </el-collapse-item>
              <el-collapse-item name="3">
                <template slot="title">
                  <span class="body-title">页面文字</span>
                </template>
                <div class="body-thr">
                  <!--                  <el-select-->
                  <!--                      v-if="pageOne.textLists && pageOne.textLists.length > 0"-->
                  <!--                      v-model="textIndex"-->
                  <!--                      placeholder="请选择"-->
                  <!--                      class="select-text"-->
                  <!--                      @change="selectMoreText($event,true)"-->
                  <!--                  >-->
                  <!--                    <el-option v-for="(item, index) in pageOne.textLists" :key="item.id" :label="'文本' + (index + 1)"-->
                  <!--                               :value="index">-->
                  <!--                    </el-option>-->
                  <!--                  </el-select>-->
                  <div>
                    <el-button :plain="true" @click="addMoreText()">新增富文本</el-button>
                    <el-button :plain="true" @click="delMoreText()">删除文本</el-button>
                  </div>
                </div>
                <!--                &lt;!&ndash; 字体修改 &ndash;&gt;-->
                <!--                <div class="body-thr" v-if="showTextEdtMenu">-->
                <!--                  <span class="body-thr-title">字体大小:</span>-->
                <!--                  <el-input-number-->
                <!--                      v-model="textSize"-->
                <!--                      @change="setTextSize"-->
                <!--                      :min="1"-->
                <!--                      :step="1"-->
                <!--                  ></el-input-number>-->
                <!--                </div>-->
                <!--                &lt;!&ndash; 颜色修改 &ndash;&gt;-->
                <!--                <div class="body-thr" v-if="showTextEdtMenu">-->
                <!--                  <span class="body-thr-title">字体颜色:</span>-->
                <!--                  <el-color-picker-->
                <!--                      class="color-picker"-->
                <!--                      v-model="textColor"-->
                <!--                      :show-alpha="true"-->
                <!--                      @change="setTextColor"-->
                <!--                  >-->
                <!--                  </el-color-picker>-->
                <!--                </div>-->
                <!--                &lt;!&ndash; 背景图片 &ndash;&gt;-->
                <!--                <div class="body-thr" v-if="showTextEdtMenu">-->
                <!--                  <span class="body-thr-title">填充颜色:</span>-->
                <!--                  <el-color-picker-->
                <!--                      class="color-picker"-->
                <!--                      v-model="textBjColor"-->
                <!--                      :show-alpha="true"-->
                <!--                      @change="setTextBjColor"-->
                <!--                  >-->
                <!--                  </el-color-picker>-->
                <!--                </div>-->
                <!--                &lt;!&ndash; 文字链接 &ndash;&gt;-->
                <!--                <div class="body-thr" v-if="showTextEdtMenu">-->
                <!--                  <span class="body-thr-title"> 文字链接: </span>-->
                <!--                  <div class="link-btn-box">-->
                <!--                    <div class="link-btn">-->
                <!--                      <el-upload-->
                <!--                          :disabled="linkstr === ''"-->
                <!--                          class="upload-demo"-->
                <!--                          :action="action"-->
                <!--                          name="image"-->
                <!--                          ref="linkUpload"-->
                <!--                          :show-file-list="false"-->
                <!--                          :on-success="handleSuccess"-->
                <!--                          :on-error="handleError"-->
                <!--                          :before-upload="beforeImageUpload"-->
                <!--                      >-->
                <!--                        <el-button :plain="true" type="primary" @click="addLink">添加链接</el-button>-->
                <!--                      </el-upload>-->
                <!--                      <el-button-->
                <!--                          :plain="true"-->
                <!--                          v-if="-->
                <!--                        pageOne &&-->
                <!--                        pageOne.textLists[textIndex] &&-->
                <!--                        pageOne.textLists[textIndex].url-->
                <!--                      "-->
                <!--                          @click="delLink"-->
                <!--                      >删除链接-->
                <!--                      </el-button>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                &lt;!&ndash; 文字内容 &ndash;&gt;-->
                <!--                <div class="body-thr" v-if="showTextEdtMenu">-->
                <!--                  <span class="body-thr-title">文字内容:</span>-->
                <!--                  <el-button :plain="true" @click="saveText">保存文本</el-button>-->
                <!--                </div>-->
                <!--                <div class="body-thr-textarea" v-if="showTextEdtMenu">-->
                <!--                  <el-input-->
                <!--                      type="textarea"-->
                <!--                      ref="myTextarea"-->
                <!--                      placeholder="请输入内容"-->
                <!--                      @change="saveText"-->
                <!--                      v-model="textText"-->
                <!--                      :autosize="{ minRows: 3, maxRows: 5 }"-->
                <!--                      maxlength="100"-->
                <!--                      :style="{-->
                <!--                    fontSize: textSize,-->
                <!--                    color: textColor,-->
                <!--                  }"-->
                <!--                      show-word-limit-->
                <!--                  >-->
                <!--                  </el-input>-->
                <!--                </div>-->
              </el-collapse-item>
              <el-collapse-item name="4">
                <template slot="title">
                  <span class="body-title">形状</span>
                </template>
                <div class="body-shape">
                  <div v-for="(v, i) in shapeArr" :key="i" :draggable="pageName !== ''" class="body-shape-box"
                       @dragstart="onDragShapeStart(v.class)"
                       @mousedown="checkIsPageClicked">
                    <div :class="v.class" :title="v.name"></div>
                  </div>
                  <!-- <div class="body-shape-box"> -->
                  <!-- 三角形-->
                  <!-- <div class="triangle" title="三角形"></div>
                  </div>
                  <div class="body-shape-box"> -->
                  <!-- 心形-->
                  <!-- <div class="heart" title="心形"></div>
                  </div> -->
                </div>
                <div class="body-shape">
                  <el-select
                      v-if="pageOne.shapeLists && pageOne.shapeLists.length > 0"
                      v-model="shapeIndex"
                      class="select-shape"
                      placeholder="请选择"
                      @change="selectShape"
                  >
                    <el-option v-for="(item, index) in pageOne.shapeLists" :key="item.id" :label="'形状' + (index + 1)"
                               :value="index"></el-option>
                  </el-select>
                  <i v-if="shapeIndex !== -1 && shapeIndex !== null" class="shape-del ri-delete-bin-line" title="删除"
                     @click="delShape"></i>
                </div>
                <!-- 形状填充 -->
                <div v-if="showShapeEdtMenu" class="body-thr">
                  <span class="body-thr-title">填充颜色:</span>
                  <el-color-picker v-model="shapeBjColor" :show-alpha="true" class="color-picker"
                                   @change="setShapeBjColor"></el-color-picker>
                </div>
                <!-- 形状轮廓 -->
                <div v-if="showShapeEdtMenu" class="body-thr">
                  <span class="body-thr-title">轮廓颜色:</span>
                  <el-color-picker v-model="shapeBorderColor" :show-alpha="true" class="color-picker"
                                   @change="setShapeBorderColor"></el-color-picker>
                </div>
              </el-collapse-item>
              <el-collapse-item name="5">
                <template slot="title">
                  <span class="body-title">图片</span>
                </template>
                <div>
                  <!-- 背景图片 -->
                  <div class="body-thr">
                    <div class="upload-image">
                      <span class="body-thr-title">背景图片:</span>
                      <el-upload
                          ref="uploadImage"
                          :action="action"
                          :before-upload="beforeImageUploadImage"
                          :disabled="titleIndex === '' || pageIndex === ''"
                          :file-list="imageList"
                          :on-remove="handleRemoveImage"
                          :on-success="handleSuccessImage"
                          class="upload-demo"
                          name="image"
                      >
                        <el-button size="small" type="primary" @click="checkIsPageClicked">点击上传</el-button>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item name="6">
                <template slot="title">
                  <span class="body-title">页面图表</span>
                </template>
                <div class="body-fou">
                  <el-collapse v-model="activeChartEdtNames">
                    <el-collapse-item name="1">
                      <template slot="title">
                        <span class="body-fou-title">图表类型</span>
                      </template>
                      <div class="body-fou-body">
                        <div
                            v-for="(type, index) in chartTypes"
                            :key="index"
                            :draggable="pageName !== ''"
                            class="fou-body-icon"
                            @dragstart="onDragStart(type.style)"
                            @mousedown="checkIsPageClicked"
                        >
                          <el-tooltip :open-delay="500" content="拖动到页面中添加图表" effect="light" placement="top">
                            <i :class="type.class"></i>
                          </el-tooltip>
                        </div>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                      <template slot="title">
                        <span class="body-fou-title">图表数据</span>
                      </template>
                      <div v-if="chartIndex !== -1" class="body-fou-body">
                        <el-select v-model="chartIndex" class="select-chart" placeholder="请选择" @change="selectChart">
                          <el-option v-for="(chart, index) in pageOne.chartLists" :key="chart.id"
                                     :label="'图表' + (index + 1)" :value="index"></el-option>
                        </el-select>
                        <div class="data-icon">
                          <el-tooltip :open-delay="500" content="删除这个图表" effect="light" placement="left-end">
                            <i class="fou-body-delC ri-delete-bin-line" @click="delChart"></i>
                          </el-tooltip>
                          <el-tooltip :open-delay="500" content="添加一行数据" effect="light" placement="top-end">
                            <i class="fou-body-addD ri-add-line" @click="showAddData = !showAddData"></i>
                          </el-tooltip>
                          <el-tooltip :open-delay="500" content="删除一行数据" effect="light" placement="top-start">
                            <i class="fou-body-delD ri-subtract-fill" @click="showDelData = !showDelData"></i>
                          </el-tooltip>
                          <el-tooltip :open-delay="500" content="手动更新图表" effect="light" placement="right-end">
                            <i class="fou-body-upD ri-refresh-line" @click="chartDataUpData"></i>
                          </el-tooltip>
                        </div>
                      </div>
                      <div v-if="chartIndex !== -1" class="body-fou-body">
                        <div class="fou-body-data">
                          <div class="data-body">
                            <div class="data-body-one">
                              <div
                                  v-for="(data, index) in titleLists[titleIndex].pageLists[pageIndex].chartLists[chartIndex].chartData.y"
                                  :key="index" class="one-margin">
                                <el-input
                                    v-model="titleLists[titleIndex].pageLists[pageIndex].chartLists[chartIndex].chartData.y[index]"
                                    @change="chartDataUpData"></el-input>
                              </div>
                            </div>
                            <div class="data-body-one">
                              <div
                                  v-for="(data, index) in titleLists[titleIndex].pageLists[pageIndex].chartLists[chartIndex].chartData.x"
                                  :key="index" class="one-margin">
                                <el-input
                                    v-model="titleLists[titleIndex].pageLists[pageIndex].chartLists[chartIndex].chartData.x[index]"
                                    @change="chartDataUpData"></el-input>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                      <template slot="title">
                        <span class="body-fou-title">表外样式</span>
                      </template>
                      <div v-if="chartIndex !== -1" class="body-fou-body">
                        <el-form ref="ruleForm"
                                 :model="titleLists[titleIndex].pageLists[pageIndex].chartLists[chartIndex]"
                                 class="body-fou-form">
                          <el-form-item>
                            <div class="form-bgColor" @click="chartBgColorUpData()">
                              <color-picker v-model="chartBgColor"></color-picker>
                            </div>
                          </el-form-item>
                        </el-form>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="4">
                      <template slot="title">
                        <span class="body-fou-title">表内样式</span>
                      </template>
                      <div v-if="chartIndex !== -1" class="body-fou-body">
                        <el-form ref="ruleForm"
                                 :model="titleLists[titleIndex].pageLists[pageIndex].chartLists[chartIndex]"
                                 class="body-fou-form">
                          <el-form-item>
                            <div class="form-insides">
                              <span>X坐标颜色</span>
                              <span>Y坐标颜色</span>
                            </div>
                            <el-color-picker v-model="chartXColor" :show-alpha="true" class="form-color"
                                             @change="changeChartXColor">
                            </el-color-picker>
                            <el-color-picker v-model="chartYColor" :show-alpha="true" class="form-color"
                                             @change="changeChartYColor">
                            </el-color-picker>
                          </el-form-item>
                        </el-form>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <!--   图层树     -->
        <div v-show="showInfoTree" class="body-right-infoTree">
          <div class="right-infoTree-top">
            <div class="infoTree-top-title">
              <span>图层树:</span>
            </div>
            <i class="ri-close-line" @click="showInfoTree = false"></i>
          </div>
          <!--     @check-change="testLayer"  ref="tree"    -->
          <el-tree ref="infoTree" :data="infoTrees"
                   :default-expanded-keys="['ProjectTree_Root']"
                   :expand-on-click-node="true"
                   :props="defaultProps"
                   class="right-infoTree-tree" node-key="iD"
                   show-checkbox
                   @check="checkInfoTree">
          </el-tree>
          <button @click="saveLayer()">保存图层</button>
        </div>
        <!--    标签页面    -->
        <marker-edt v-if="showMarkerEdt"
                    ref="showMarkerEdtPopupRef"
                    :markerIds.sync="markerIds"
                    :markerLists.sync="pageOne.markerLists"
                    @close-popup="showMarkerEdt=false"
                    @add-marker="markerFlag=true">
        </marker-edt>
        <!--    车辆页面    -->
        <vehicle-edt v-if="showCarEdt"
                     ref="showCarEdtPopupRef"
                     :carData.sync="carData"
                     :carIds.sync="carIds"
                     :carLists.sync="pageOne.carLists"
                     :carWays.sync="carWays"
                     @add-car="carFlag=true"
                     @close-popup="showCarEdt=false">
        </vehicle-edt>

        <camera-tour v-if="showTourEdt"
                     ref="showTourEdtPopupRef"
                     :reportTour.sync="reportTour"
                     @close-popup="showTourEdt=false">
        </camera-tour>
        <!--   导览   -->
        <div v-show="showAnimationImage" class="body-mid-animation">
          <div v-for="(imgOne, index) in imgS" :key="index">
            <div class="mid-animation-img" @click="playAnimation(imgOne)">
              <img :src="imgOne.src" alt="动画"/>
              <span>{{ imgOne.name }}</span>
            </div>
          </div>
        </div>
        <!--   快速选线   -->
        <div v-if="showFastLine" class="body-mid-fastLine">
          <div class="mid-fastLine-input">
            <div class="fastLine-title">
              <span>输入二维坐标</span>
            </div>
            <div class="fastLine-body">
              <span>x:</span><input v-model="coordinate_x" type="text"/>
              <span>y:</span><input v-model="coordinate_y" type="text"/>
              <button @click="addCoordinate">添加坐标</button>
            </div>
            <div class="fastLine-coordinate">
              <span>数组长度:{{ coordinates.length }}</span>
              <ul v-for="(coordinate, index) in coordinates" :key="index">
                <li>
                  <span>{{ index + 1 }}:</span>
                  <span>{{ coordinate }}</span>
                  <button @click="deleteCoordinate(index)">删除</button>
                </li>
              </ul>
            </div>
          </div>
          <div class="mid-fastLine-input">
            <div class="fastLine-title">
              <span>输入三维坐标</span>
              <button @click="addPolygon_flag = false">输入</button>
              <button @click="addPolygon_flag = true">点选</button>
            </div>
            <div class="fastLine-body_3">
              <span>x:</span>
              <input v-model="coordinate3_x" :disabled="addPolygon_flag" type="text"/>
              <br/>
              <span>y:</span>
              <input v-model="coordinate3_y" :disabled="addPolygon_flag" type="text"/>
              <br/>
              <span>z:</span>
              <input v-model="coordinate3_z" :disabled="addPolygon_flag" type="text"/>
              <button :disabled="addPolygon_flag" @click="addCoordinate3">添加坐标</button>
            </div>
            <div class="fastLine-coordinate">
              <span>数组长度:{{ coordinates3.length }}</span>
              <ul v-for="(coordinate3, index) in coordinates3" :key="index">
                <li>
                  <span>{{ index + 1 }}:</span>
                  <span class="txt_3">{{ coordinate3 }}</span>
                  <button @click="deleteCoordinate3(index)">删除</button>
                </li>
              </ul>
            </div>
          </div>
          <div class="mid-fastLine-input">
            <div class="fastLine-title">
              <span>输出三维维坐标</span>
            </div>
            <div class="fastLine-btn">
              <button @click="clearPolygonAll">重置</button>
              <button @click="countCoordinate3s()">生成坐标</button>
              <button @click="addPolygon_1()">生成图形</button>
              <button @click="clearPolygon()">清除图形</button>
            </div>
            <div class="fastLine-coordinate">
              <ul v-for="(ps, index) in coordinates3_output" :key="index">
                <li>{{ index + 1 }}:</li>
                <li v-for="(p, index) in ps" :key="index">
                  <span>{{ p }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 文本框 -->
        <div v-if="pageName !== ''">
          <div
              v-for="(text, index) in pageOne.textLists"
              :id="text.id"
              :key="text.id"
              ref="imageContainer"
              v-dialog-drag-l2
              :class="[`text${index}`,{'current': textIndex===index}]"
              :style="text.class"
              class="plan-popup-label"
              @mouseup="saveTextLeftAndTop(text.id, index)"
          >
            <div class="ql-editor2" @click="selectMoreText(index,true)" v-html="pageOne.textLists[index].text"></div>
            <!--            <div v-if="text.linkStart === -1" class="plan-popup-link-none">{{ text.text }}</div>-->
            <!--            <div v-else class="plan-popup-link">-->
            <!--              <span class="plan-popup-link-first">{{ getSubstringAfter(text.text, text.linkStart) }}</span>-->
            <!--              <el-popover popper-class="meeting-popover" trigger="click">-->
            <!--                <iframe class="meeting-popover-pop" :style="{width: text.linkCss.width,height: text.linkCss.height,}"-->
            <!--                        :src="text.url"></iframe>-->
            <!--                <el-link slot="reference" type="primary" :style="{ fontSize: text.class.fontSize }">-->
            <!--                  {{ text.linkstr }}-->
            <!--                </el-link>-->
            <!--              </el-popover>-->
            <!--              <span>{{ getSubstringBefore(text.text, text.linkstr, text.linkStart) }}</span>-->
            <!--            </div>-->
            <div class="resizeText" @mousedown="startResize(text, $event, index, 'text')">
              <i :id="'size' + text.id" class="ri-aspect-ratio-line"></i>
            </div>
          </div>
        </div>

        <!--  图片    -->
        <div v-if="pageName !== ''">
          <div v-for="(image, index) in pageOne.imageLists" :key="image.id">
            <div
                v-if="image.showImage === pageName || url !== null"
                :id="image.id"
                ref="imageContainer"
                v-dialog-drag-l2
                v-loading="ImageLoading"
                :style="image.class"
                class="plan-popup-img"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                element-loading-spinner="el-icon-loading"
                element-loading-text="拼命加载中"
                @mouseup="saveImageLeftAndTop(image, index)"
            >
              <div class="resizeImg" @mousedown="startResize(image, $event, index, 'image')">
                <i :id="'size' + image.id" class="ri-aspect-ratio-line"></i>
              </div>
            </div>
          </div>
        </div>

        <!--   图表     -->
        <div
            v-for="(chart, index) in pageOne.chartLists"
            v-show="pageName !== ''"
            :id="'box' + chart.id"
            :key="chart.id"
            v-dialog-drag-l2
            :style="chart.class"
            class="plan-popup-chart"
            @click="selectChart(index)"
            @mouseup="saveChartLeftAndTop(chart.id, index)"
        >
          <div v-show="chart.showChart === pageName" :id="chart.id" :style="{ width: '100%', height: '100%' }"></div>
          <div class="resizeShape" @mousedown="startResize(chart, $event, index, 'chart')">
            <i :id="'size' + chart.id" class="ri-aspect-ratio-line"></i>
          </div>
        </div>

        <!-- 形状 -->
        <div v-if="pageName !== ''">
          <div
              v-for="(shape, index) in pageOne.shapeLists"
              :id="shape.id"
              :key="shape.id"
              v-dialog-drag-l2
              :style="shape.class"
              class="plan-popup-shape"
              @click="selectShape(index)"
              @mouseup="saveShapeLeftAndTop(shape.id, index)"
          >
            <div :class="shape.class.borderRadius && shape.class.borderRadius == '50%'? 'resizeShape2': 'resizeShape'"
                 @mousedown="startResize(shape, $event, index, 'shape')">
              <i :id="'size' + shape.id" class="ri-aspect-ratio-line"></i>
            </div>
          </div>
        </div>

        <!--   图表数据  -->
        <div v-if="showAddData" class="plan-popup-addData">
          <div class="addData">
            <span>Y:</span>
            <el-input v-model="newY"></el-input>
          </div>
          <div class="addData">
            <span>X:</span>
            <el-input v-model="newX"></el-input>
          </div>
          <div>
            <el-select v-model="addDataIndex" class="dropdown-chart" placeholder="请选择" @change="selectAddDataIndex">
              <el-option v-for="(data, index) in pageOne.chartLists[chartIndex].chartData.x" :key="index" :label="data"
                         :value="index"></el-option>
            </el-select>
          </div>
          <el-button @click="showAddData = false">取消</el-button>
          <el-button @click="addData">添加</el-button>
        </div>
        <div v-if="showDelData" class="plan-popup-delData">
          <div class="delData-box">
            <div v-for="(data, index) in pageOne.chartLists[chartIndex].chartData.x" :key="index" class="delData">
              <input v-model="delDataIndex" :value="index" type="checkbox"/>
              <span>{{ data }}</span>
            </div>
          </div>
          <el-button @click="showDelData = false">取消</el-button>
          <el-button class="delete" @click="deleteCheckedDataIndex">删除</el-button>
        </div>

        <!--   模型操作   -->
        <div v-show="showGYMN" class="plan-popup-time">
          <div v-if="true" class="time-bar">
            <el-slider v-model="sliderTime" :marks="marks" :show-tooltip="false"
                       :step="5" @change="timeTypeClickUp" @input="timeTypeClick2">
            </el-slider>
          </div>
        </div>
        <div v-show="showTQMN" class="plan-popup-weather">
          <ul>
            <li @click="sunny">
              <i class="ri-sun-line"></i><br/>阳光
            </li>
            <li @click="rain(0.2, 0.2)">
              <i class="ri-heavy-showers-line"></i><br/>雨滴
            </li>
            <li @click="snow(0.2, 0)">
              <i class="ri-snowy-line"></i><br/>雪花
            </li>
          </ul>
        </div>
        <polyline-popup
            v-if="showPolylinePopup"
            ref="polylinePopupRef"
            :polylineIds.sync="polylineIds"
            :polylineLists.sync="pageOne.polylineLists"
            @close-popup="showPolylinePopup=false"
        >
        </polyline-popup>
        <polygon-popup
            v-if="showPolygonPopup"
            ref="polygonPopupRef"
            :polygonIds.sync="polygonIds"
            :polygonLists.sync="pageOne.polygonLists"
            @close-popup="showPolygonPopup=false"
        >
        </polygon-popup>
        <!--   分析工具弹窗   -->
        <sun-Shine v-if="showAnalysisTools==='Sunshine'"
                   ref="sunshinePopupRef"
                   @close-popup="showAnalysisTools=null">
        </sun-Shine>

        <terrain-slope v-if="showAnalysisTools==='TerrainSlope'"
                       ref="terrainSlopePopupRef"
                       @close-popup="showAnalysisTools=null">
        </terrain-slope>

        <contour-line v-if="showAnalysisTools==='ContourLine'"
                      ref="contourLinePopupRef"
                      @close-popup="showAnalysisTools=null">
        </contour-line>

        <flood-fill v-if="showAnalysisTools==='FloodFill'"
                    ref="floodFillPopupRef"
                    @close-popup="showAnalysisTools=null"
                    @select-floodFill="startFloodFill_flag=true">
        </flood-fill>

        <fluid-simulation v-if="showAnalysisTools==='FluidSimulation'"
                          ref="fluidSimulationPopupRef"
                          :apiLists.sync="pageOne.apiLists"
                          @close-popup="showAnalysisTools=null"
                          @select-fluidSimulation="startFluid_flag=true">
        </fluid-simulation>

        <sky-line v-if="showAnalysisTools==='SkyLine'"
                  ref="skyLinePopupRef"
                  @close-popup="showAnalysisTools=null">
        </sky-line>

        <inter-visibility v-if="showAnalysisTools==='InterVisibility'"
                          ref="interVisibilityPopupRef"
                          @close-popup="showAnalysisTools=null">
        </inter-visibility>

        <view-dome v-if="showAnalysisTools==='ViewDome'"
                   ref="viewDomePopupRef"
                   @close-popup="showAnalysisTools=null">
        </view-dome>

        <view-shed v-if="showAnalysisTools==='ViewShed'"
                   ref="viewShedPopupRef"
                   @close-popup="showAnalysisTools=null">
        </view-shed>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import "../css/planView";
</style>
<script>
/* eslint-disable */
import "remixicon/fonts/remixicon.css";
import axios from "axios";
import {left} from "core-js/internals/array-reduce";
import * as echarts from "echarts";
import {nextTick} from "vue";
import {Sketch} from "vue-color";
import polylinePopup from "@/views/polyline/polylinePopup.vue";
import PolygonPopup from "@/views/polygon/polygonPopup.vue";
import SunShine from "@/views/AnalysisTools/sunShine.vue";
import TerrainSlope from "@/views/AnalysisTools/terrainSlope.vue";
import ContourLine from "@/views/AnalysisTools/contourLine.vue";
import FloodFill from "@/views/AnalysisTools/floodFill.vue";
import FluidSimulation from "@/views/AnalysisTools/fluidSimulation.vue";
import SkyLine from "@/views/AnalysisTools/skyLine.vue";
import InterVisibility from "@/views/AnalysisTools/interVisibility.vue";
import ViewDome from "@/views/AnalysisTools/viewDome.vue";
import ViewShed from "@/views/AnalysisTools/viewShed.vue";
import CameraTour from "@/views/cameraTour/CameraTour.vue";
import MarkerEdt from "@/views/markerEdt/markerEdt.vue";
import VehicleEdt from "@/views/vehicleEdt/vehicleEdt.vue";
import initApiData from "@/js/initApiData"
import reportTemplate from "@/js/reportTemplate";
import html2canvas from "html2canvas";
import {Loading} from "element-ui";
import MoreTextEdtWang from "@/views/components/wangEditor.vue";

export default {
  name: "PlanView",
  computed: {
    initApiData() {
      return initApiData
    }
  },
  components: {
    MoreTextEdtWang,
    VehicleEdt,
    MarkerEdt,
    CameraTour,
    ViewShed,
    ViewDome,
    InterVisibility,
    SkyLine,
    FluidSimulation,
    FloodFill,
    ContourLine,
    TerrainSlope,
    SunShine,
    PolygonPopup,
    polylinePopup,
    ColorPicker: Sketch,
  },
  data() {
    return {
      showTextEdtMenu2: false,
      editorClass: {left: '370px', top: '500px'},
      //悬浮高亮
      highlightOpen: false,
      allowedHover: false,
      highlight_flag: false,
      //分析工具
      showAnalysisTools: null,
      //流体
      startFluid_flag: false,
      //水淹
      startFloodFill_flag: false,
      //模板1
      titleLists001: reportTemplate.titleLists001,
      titleLists000: reportTemplate.titleLists000,
      formWork: '',
      formWorks: [
        {
          value: "formWork0",
          label: "插入模板",
          disabled: true,
        },
        {
          value: "formWork1",
          label: "数智咨询服务",
        },
        {
          value: "formWork2",
          label: "项目进度汇报",
        },
        {
          value: "formWork3",
          label: "成果汇报展示",
        },
      ],
      //图片
      imageList: [],
      url: null,
      url2: null,
      imgClass: {
        width: "600px",
        height: "300px",
        backgroundImage: null,
        position: "absolute",
        zIndex: "3",
        backgroundSize: null,
        left: "300px",
        top: "100px",
        backgroundColor: "#fff",
      },
      linkstr: "",
      linkStart: -1,
      isResizing: false,
      mouseIndex: -1,
      mouseType: "",
      startX: 0,
      startY: 0,
      startWidth: 0,
      startHeight: 0,
      ImageLoading: false,
      isImageUploaded: false,
      action: this.$demo + "/uploadImage",
      //画面
      // polygonCoordinates: [],
      // newPolygonFlag: false,
      polygonIds: [],
      showPolygonPopup: false,
      //画线
      // polylineCoordinates: [],
      // newPolylineFlag: false,
      polylineIds: [],
      showPolylinePopup: false,
      //文本框
      showTextEdtMenu: false,
      textIndex: 0,
      textText: "",
      //字体修改
      textSize: "",
      //字体修改
      textColor: "",
      // 文本填充颜色
      textBjColor: "",
      //左边收起展开
      showLeftEdtList: true,
      // 拖拽类型
      dragType: "",
      // 形状
      shapeArr: [
        {class: "rectangle", name: "矩形"},
        {class: "rectangle2", name: "圆角矩形"},
        {class: "circle", name: "圆形"},
      ],
      shapeOne: {}, //创建拖拽形状时的临时变量
      shapeIndex: -1,
      showShapeEdtMenu: false,
      shapeBorderColor: "",
      shapeBjColor: "",
      //图表
      chartTypes: [
        {
          style: "bar",
          class: "ri-bar-chart-fill",
        },
        {
          style: "bar2",
          class: "ri-bar-chart-horizontal-fill",
        },
        {
          style: "pie",
          class: "ri-pie-chart-2-line",
        },
        {
          style: "line",
          class: "ri-line-chart-fill",
        },
      ], //图表类型里面的图标
      chartOne: {}, //创建拖拽图表时的临时变量
      chartIndex: -1,
      activeChartEdtNames: ["1", "2", "3", "4"], //页面图表默认展开项
      showChartEdtMenu: false, //展示图表数据的隐藏项，必须有dropDownChartIndex后才能加载
      chartBgColor: "",
      chartXColor: "", //x轴颜色
      chartYColor: "", //y轴颜色
      newX: null, //新增数据
      newY: null, //新增数据
      showDelData: false, //添加数据
      showAddData: false, //删除数据
      delDataIndex: [], //删除多选框的box
      addDataIndex: null, //添加位置

      //快速选线
      showFastLine: false,
      addPolygon_flag: false,
      coordinate_x: "",
      coordinate_y: "",
      coordinate3_x: "",
      coordinate3_y: "",
      coordinate3_z: "",
      // 初始化空数组用于存储二维坐标
      coordinates: [],
      // 初始化空数组用于存储三维坐标
      coordinates3: [],
      //存放计算每个面的坐标的集合
      coordinates3_output: [],
      //剖切开关
      VolumeClip_flag: false,
      PlaneClip_flag: false,
      //导览缩略图开关
      showAnimationImage: false,
      //导览缩略图的临时变量
      imgS: [],
      //car
      carIds: [],
      showCarEdt: false,
      carFlag: false,
      carWays: [],
      carData: [],
      /*
       * 标签
       * */
      //标签管理开关
      showMarkerEdt: false,
      //标签管理的默认展开子项的名称
      markerIds: [],
      markerFlag: false,
      //时间天气弹窗开关
      showGYMN: false,
      //时间
      sliderTime: 0,
      time: "",
      marks: {
        20: '早',
        45: '中',
        80: '晚',
      },
      timeBarFlag: true,
      isTimeBarFirst: true,
      showTQMN: false,
      //导览
      showTourEdt: false,
      //图层树开关
      showInfoTree: false,
      //图层临时变量
      infoTrees: [],
      // testTrees: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      //文本编辑开关
      showPageEdt: true,
      //文本编辑的默认展开子项的名称
      activePageEdtNames: ["1", "2", "3", "4", "5", "6"],
      //文本框的临时变量
      pageOne: {},
      //新建标题的弹窗开关
      showPopupAddTitle: false,
      //保存标题临时变量
      inputTextAddTitle: "",
      addTitleIndex: null,
      savedText: "",
      //标题分页临时变量
      titleIndex: "",
      pageIndex: "",
      pageName: "",
      titleName: "",
      reportPlanName: "",
      //标题对象的index默认命名变量
      titleLists: [
        {
          titleName: "首页", //标题名称
          titleClass: "", //汇报时的用的变色变量
          iconClass: "body-title-icon ri-arrow-drop-down-line", //编辑时，子项开关的图表样式和开关
          showTitlePage: true,
          disabledType: true,
          pageLists: [
            {
              showClick: false, //编辑时，选中的分页开关，修改样式
              pageName: "首页",
              pageView: {
                x: 0,
                y: 0,
                z: 0,
                pitch: 0,
                yaw: 0,
              },
              pageUrl: "./th.jpg",
              pageTrees: [],
              textLists: [],
              chartLists: [],
              imageLists: [],
              polylineLists: [],
              carLists: [],
              polygonLists: [],
              apiLists: [],
              markerLists: [],
              shapeLists: [],
            },
          ],
        },
        {
          titleName: "标题1", //标题名称
          titleClass: "", //汇报时的用的变色变量
          //左边图标的样式
          iconClass: "body-title-icon ri-arrow-drop-down-line",
          showTitlePage: true,
          pageLists: [
            {
              showClick: false,
              pageName: "分页1",
              pageView: {
                x: 0,
                y: 0,
                z: 0,
                pitch: 0,
                yaw: 0,
              },
              pageUrl: "./th.jpg",
              pageTrees: [],
              textLists: [],
              chartLists: [],
              imageLists: [],
              polylineLists: [],
              polygonLists: [],
              apiLists: [],
              markerLists: [],
              shapeLists: [],
              carLists: [],
            },
          ],
        },
      ],
      //保存方案
      showBCFA: false,
      inputReportName: "",
      reportKey: "",
      reportTour: [],
    };
  },
  methods: {
    /*
     * 图表
     * */
    //X坐标轴颜色
    changeChartXColor() {
      let style = this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.series[0].type;
      console.log(this.chartXColor);
      switch (style) {
        case "line":
        case "bar":
        case "bar2":
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.xAxis.axisLabel.color = this.chartXColor;
          this.chartDataUpData();
          break;
        case "pie":
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.series[0].label.color = this.chartXColor;
          this.chartDataUpData();
          break;
        default:
          break;
      }
    },
    //Y坐标轴颜色
    changeChartYColor() {
      let style =
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.series[0].type;
      switch (style) {
        case "line":
        case "bar":
        case "bar2":
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.yAxis.axisLabel.color = this.chartYColor;
          this.chartDataUpData();
          break;
        case "pie":
          this.chartDataUpData();
          break;
        default:
          break;
      }
    },
    //背景颜色
    chartBgColorUpData() {
      console.log(this.chartBgColor);
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].class.backgroundColor = this.chartBgColor.hex8;
    },
    //数据更新
    chartDataUpData() {
      if (this.chartIndex > -1) {
        switch (
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].type
            ) {
          case "line":
          case "bar":
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.xAxis.data = this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.x;
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.series[0].data = this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.y;
            break;
          case "bar2":
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.yAxis.data = this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.x;
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.series[0].data = this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.y;
            break;

          case "pie":
            let data = [];
            let chartData = this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData;
            for (let i = 0; i < chartData.x.length; i++) {
              data[i] = {
                value: chartData.y[i],
                name: chartData.x[i],
              };
            }
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options.series[0].data = data;
            break;
          default:
            break;
        }
        let dom = document.getElementById(this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].id
        );
        const progressChart = echarts.getInstanceByDom(dom);
        progressChart.setOption(this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].options
        );
        progressChart.resize();
      }
    },
    //数据操作
    addData() {
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.x.splice(this.addDataIndex + 1, 0, this.newX);
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.y.splice(this.addDataIndex + 1, 0, this.newY);
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.x.push();
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.y.push();
      //成功刷新变量初始化
      this.showAddData = false;
      this.newX = null;
      this.newY = null;
      this.addDataIndex = null;
      this.chartDataUpData();
    },
    deleteCheckedDataIndex() {
      this.delDataIndex.sort((a, b) => b - a).forEach((index) => {
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.x.splice(index, 1);
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.y.splice(index, 1);
      });
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.x.push();
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].chartData.y.push();
      this.delDataIndex = [];
      this.showDelData = false;
      this.chartDataUpData();
    },
    selectAddDataIndex(index) {
      this.addDataIndex = index;
    },
    // 保存位置
    saveChartLeftAndTop(id, index) {
      let dom = document.getElementById("box" + id);
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[index].class.left = dom.style.left;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[index].class.top = dom.style.top;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[index].class.width = dom.style.width;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[index].class.height = dom.style.height;
    },
    // 保存形状位置
    saveShapeLeftAndTop(id, index) {
      let dom = document.getElementById(id);
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[index].class.left = dom.style.left;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[index].class.top = dom.style.top;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[index].class.width = dom.style.width;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[index].class.height = dom.style.height;
    },
    setShapeBjColor() {
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[this.shapeIndex].class.backgroundColor = this.shapeBjColor;
    },
    setShapeBorderColor() {
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[this.shapeIndex].class.borderColor = this.shapeBorderColor;
    },
    //下拉选择编辑图表
    selectChart(command) {
      this.chartIndex = command;
      this.showChartEdtMenu = true;
    },
    // 下拉选择编辑形状
    selectShape(command) {
      this.shapeIndex = command;
      this.shapeBorderColor = this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[command].class.borderColor;
      this.shapeBjColor = this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[command].class.backgroundColor;
      this.showShapeEdtMenu = true;
    },
    //删除图表
    delChart() {
      let dom = document.getElementById(this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.chartIndex].id);
      const progressChart = echarts.getInstanceByDom(dom);
      progressChart.dispose();
      console.log("删除前", this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists);
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists.splice(this.chartIndex, 1);
      console.log("删除后", this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists);
      this.pageOne = this.titleLists[this.titleIndex].pageLists[this.pageIndex];
      // console.log("复制",this.pageOne)
      this.chartIndex = -1;
      this.showChartEdtMenu = false;
    },
    //删除形状
    delShape() {
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists.splice(this.shapeIndex, 1);
      this.shapeIndex = null;
      this.showShapeEdtMenu = false;
    },
    //结束拖动生成图表
    onDrop() {
      console.log("图表位置:");
      if (this.dragType === "chart") {
        let length = this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists.length;
        this.chartIndex = length;
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists.push(JSON.parse(JSON.stringify(this.chartOne)));
        nextTick(() => {
          let chart = this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[length];
          let dom = document.getElementById(chart.id);
          const progressChart = echarts.init(dom);
          progressChart.setOption(chart.options);
        });
      }
      if (this.dragType === "shape") {
        let length = this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists.length;
        this.shapeIndex = length;
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists.push(JSON.parse(JSON.stringify(this.shapeOne)));
        this.selectShape(length);
      }
      this.dragType = "";
    },
    //拖动位置
    onDragOver(event) {
      if (this.dragType === "chart") {
        this.chartOne.class.left = event.clientX + "px";
        this.chartOne.class.top = event.clientY + "px";
      }
      if (this.dragType === "shape") {
        this.shapeOne.class.left = event.clientX + "px";
        this.shapeOne.class.top = event.clientY + "px";
      }
    },
    //选择图表样式
    onDragStart(style) {
      console.log("选择图表类型为:", style);
      this.dragType = "chart";
      const timestamp = new Date().getTime();
      switch (style) {
        case "line":
        case "bar":
          this.chartOne = {
            id: "chart" + timestamp,
            ref: "chart" + timestamp,
            showChart: this.pageName,
            type: style,
            class: {
              left: null,
              top: null,
              width: "300px",
              height: "300px",
              backgroundColor: "#3b3b3b",
            },
            chartData: {
              x: ["A", "B", "C", "D", "E"],
              y: [10, 20, 30, 40, 50],
            },
            options: {
              xAxis: {
                type: "category",
                data: ["A", "B", "C", "D", "E"],
                axisLabel: {
                  fontSize: "16px",
                  color: "white", // 设置x轴文字颜色为黑色
                },
              },
              yAxis: {
                type: "value",
                axisLabel: {
                  color: "white", // 设置y轴文字颜色为黑色
                  fontSize: "16px",
                },
              },
              grid: {
                top: "12%", // 设置顶部空白大小
                bottom: "14%", // 设置底部空白大小
                right: "10%", //设置右边空白大小
                left: "16%", //
              },
              series: [
                {
                  data: [10, 20, 30, 40, 50],
                  type: style,
                },
              ],
              tooltip: {
                // trigger: 'item',//鼠标hover到折线点显示相应数据，
                trigger: "axis", // 鼠标hover到一条柱状图显示全部数据，
                axisPointer: {
                  //默认为line，line直线，cross十字准星，shadow阴影
                  type: "cross", // 设置指示器类型为十字准星
                },
              },
            },
          };
          break;
        case "bar2":
          this.chartOne = {
            id: "chart" + timestamp,
            ref: "chart" + timestamp,
            showChart: this.pageName,
            type: style,
            class: {
              left: null,
              top: null,
              width: "300px",
              height: "300px",
              backgroundColor: "#3b3b3b",
            },
            chartData: {
              x: ["A", "B", "C", "D", "E"],
              y: [10, 20, 30, 40, 50],
            },
            options: {
              xAxis: {
                type: "value",
                axisLabel: {
                  fontSize: "16px",
                  color: "white", // 设置x轴文字颜色为黑色
                },
              },
              yAxis: {
                type: "category",
                data: ["A", "B", "C", "D", "E"],
                axisLabel: {
                  color: "white", // 设置y轴文字颜色为黑色
                  fontSize: "16px",
                },
              },
              grid: {
                top: "12%", // 设置顶部空白大小
                bottom: "14%", // 设置底部空白大小
                right: "10%", //设置右边空白大小
                left: "16%", //
              },
              series: [
                {
                  data: [10, 20, 30, 40, 50],
                  type: "bar",
                },
              ],
              tooltip: {
                // trigger: 'item',//鼠标hover到折线点显示相应数据，
                trigger: "axis", // 鼠标hover到一条柱状图显示全部数据，
                axisPointer: {
                  //默认为line，line直线，cross十字准星，shadow阴影
                  type: "cross", // 设置指示器类型为十字准星
                },
              },
            },
          };
          break;
        case "pie":
          let data = [];
          let chartData = {
            x: ["A", "B", "C", "D", "E"],
            y: [10, 20, 30, 40, 50],
          };
          for (let i = 0; i < chartData.x.length; i++) {
            data[i] = {
              value: chartData.y[i],
              name: chartData.x[i],
            };
          }
          this.chartOne = {
            id: "chart" + timestamp,
            ref: "chart" + timestamp,
            showChart: this.pageName,
            type: style,
            class: {
              left: null,
              top: null,
              width: "300px",
              height: "300px",
              backgroundColor: "#3b3b3b",
            },
            chartData: {
              x: ["A", "B", "C", "D", "E"],
              y: [10, 20, 30, 40, 50],
            },
            options: {
              series: [
                {
                  type: "pie",
                  radius: "55%",
                  data: data,
                  center: ["50%", "50%"], // 设置扇形图的中心位置
                  padding: [10, 10, 10, 10], // 设置内边距，顺序为上、右、下、左
                  label: {
                    color: "white", // 设置字体颜色为黑色
                    fontSize: "16px",
                  },
                },
              ],
              tooltip: {
                trigger: "item", // 设置触发类型为数据项
                formatter: "{b} : {c}", // 设置数据项格式，{b}代表数据项名称，{c}代表数据值
              },
            },
          };
          break;
        default:
          break;
      }
    },
    // 选择形状
    onDragShapeStart(val) {
      const timestamp = new Date().getTime();
      this.dragType = "shape";
      switch (val) {
        case "rectangle":
          this.shapeOne = {
            id: "shape" + timestamp,
            ref: "shape" + timestamp,
            class: {
              width: "300px",
              height: "200px",
              backgroundColor: "#4874CB",
              borderColor: "#325395",
              border: "1px solid",
              left: null,
              top: null,
            },
          };
          break;
        case "rectangle2":
          this.shapeOne = {
            id: "shape" + timestamp,
            ref: "shape" + timestamp,
            class: {
              width: "300px",
              height: "200px",
              backgroundColor: "#4874CB",
              borderRadius: "20px",
              borderColor: "#325395",
              border: "1px solid",
              left: null,
              top: null,
            },
          };
          break;
        case "circle":
          this.shapeOne = {
            id: "shape" + timestamp,
            ref: "shape" + timestamp,
            class: {
              width: "300px",
              height: "300px",
              backgroundColor: "#4874CB",
              borderRadius: "50%",
              borderColor: "#325395",
              border: "1px solid",
              left: null,
              top: null,
            },
          };
          break;
        default:
          break;
      }
    },

    /*
     * 文件上传
     * */
    saveImageLeftAndTop(image, index) {
      let dom = document.getElementById(image.id);
      console.log(dom.style.left, dom.style.top);
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].imageLists[index].class.left = dom.style.left;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].imageLists[index].class.top = dom.style.top;
    },
    handleRemoveImage(file, fileList) {
      this.url = null;
      console.log(file.name)
      axios.post(this.$demo + "/delImage", {}, {params: {imageName: file.name}}).then((response) => {
        let index = -1;
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].imageLists.forEach((v, i) => {
          if (v.image.uid === file.uid) {
            index = i;
          }
        });
        if (index !== -1) {
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].imageLists.splice(index, 1);
        }
      }).catch((error) => {
        console.error(error);
      });
    },
    handleSuccessImage(response, file, fileList) {
      this.ImageLoading = true;
      this.url2 = "F:/idea/demo/files/image/" + response; //lwh的本地
      this.url = this.$demoFile + response; //lwh的在线
      const interval = setInterval(() => {
        this.checkFileExistence(this.url2);
        console.log(this.isImageUploaded);
        if (this.isImageUploaded) {
          clearInterval(interval);
          console.log(file);
          this.ImageLoading = false;

          console.log("上传成功:" + response);
          this.$message.success("Image uploaded successfully");
          // this.imgClass.backgroundImage = `url(${require("C:/wh_test/demo/files/image/" + response)})`;//lwh的本地
          this.imgClass.backgroundImage = "url(" + this.$demoFile + response + ")"; //lwh的在线
          this.imgClass.backgroundSize = "100% 100%";
          const timestamp = new Date().getTime();
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].imageLists.push({
            id: "image" + timestamp,
            class: JSON.parse(JSON.stringify(this.imgClass)),
            showImage: this.pageName,
            image: {
              name: file.name,
              status: file.status,
              uid: file.uid,
            },
          });
          console.log(this.pageName);
          console.log(file);
          this.url2 = null;
          this.url = null;
        }
      }, 1000);
    },
    beforeImageUploadImage(file) {
      // 文件上传前的处理逻辑，例如文件类型、大小限制等
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt500K = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      } else if (!isLt500K) {
        this.$message.error("上传图片大小不能超过 5MB!");
        return false;
      } else {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
              if (img.width > 1200) {
                this.imgClass.width = img.width / 2 + "px";
                this.imgClass.height = img.height / 2 + "px";
              } else if (img.height > 675) {
                this.imgClass.width = img.width / 2 + "px";
                this.imgClass.height = img.height / 2 + "px";
              } else {
                this.imgClass.width = img.width + "px";
                this.imgClass.height = img.height + "px";
              }
              console.log(this.imgClass.width, this.imgClass.height)
              resolve(file);
            };
            img.src = e.target.result;
          };
          reader.readAsDataURL(file);
        });
      }
    },

    checkIsPageClicked() {
      if (this.titleIndex === "" || this.pageIndex === "") {
        this.dragType = "";
        this.$message.warning("请选择页面");
      }
    },
    startResize(val, e, index, type) {
      e.preventDefault();
      this.isResizing = true;
      this.mouseType = type;
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.mouseIndex = index;
      let dom = document.getElementById(val.id);
      this.startWidth = dom.offsetWidth;
      this.startHeight = dom.offsetHeight;
      document.addEventListener("mousemove", this.overReSize);
      document.addEventListener("mouseup", this.stopResize);
    },
    overReSize(e) {
      if (this.isResizing && this.mouseIndex != -1) {
        //防止拖拽时，模型跟着移动
        __g.settings.setEnableInteract(false);
        if (this.mouseType == "text") {
          let newWidth = this.startWidth + (e.clientX - this.startX);
          let newHeight = this.startHeight + (e.clientY - this.startY);
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.mouseIndex].class.width = newWidth + "px";
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.mouseIndex].class.height = newHeight + "px";
        }
        if (this.mouseType == "shape") {
          let newWidth = this.startWidth + (e.clientX - this.startX);
          let newHeight = this.startHeight + (e.clientY - this.startY);
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[this.mouseIndex].class.width = newWidth + "px";
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].shapeLists[this.mouseIndex].class.height = newHeight + "px";
        }
        if (this.mouseType == "chart") {
          let newWidth = this.startWidth + (e.clientX - this.startX);
          let newHeight = this.startHeight + (e.clientY - this.startY);
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.mouseIndex].class.width = newWidth + "px";
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.mouseIndex].class.height = newHeight + "px";
          let dom = document.getElementById(this.titleLists[this.titleIndex].pageLists[this.pageIndex].chartLists[this.mouseIndex].id);
          const progressChart = echarts.getInstanceByDom(dom);
          progressChart.resize();
        }
        if (this.mouseType == "image") {
          let newWidth = this.startWidth + (e.clientX - this.startX);
          let newHeight = (newWidth / this.startWidth) * this.startHeight;
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].imageLists[this.mouseIndex].class.width = newWidth + "px";
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].imageLists[this.mouseIndex].class.height = newHeight + "px";
        }
      }
    },
    stopResize() {
      __g.settings.setEnableInteract(true);
      this.isResizing = false;
      this.mouseType = "";
      this.mouseIndex = -1;
      document.removeEventListener("mousemove", this.overReSize);
      document.removeEventListener("mouseup", this.stopResize);
    },

    handleError(error) {
      this.linkStart = -1;
      this.linkstr = "";
    },
    checkFileExistence(filePath) {
      axios
          .post(
              this.$demo + "/checkFileExistence",
              {},
              {
                params: {filePath: filePath},
              }
          )
          .then((response) => {
            console.log(response);
            this.isImageUploaded = response.data;
          })
          .catch((error) => {
            console.error("Error checking file existence:", error);
          });
    },
    handleSuccess(response, file, fileList) {
      this.url2 = "F:/idea/demo/files/image/" + response; //lwh的本地
      this.url = this.$demoFile + "/image/" + response; //lwh的在线
      const {name} = file;
      const fileName = name.substring(name.lastIndexOf(".")).toLowerCase();
      const interval = setInterval(() => {
        this.checkFileExistence(this.url2);
        if (this.isImageUploaded) {
          clearInterval(interval);
          this.$message.success("Image uploaded successfully");
          if (fileName == ".pdf" || fileName == ".png" || fileName == ".jpg") {
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url = this.$demoFile + response
          } else if (fileName == ".doc" || fileName == ".docx" || fileName == ".xls" || fileName == ".xlsx") {
            // 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(this.base64Encode(this.$demoFile + response));
            // 'https://filepreview.tylin.com.cn/onlinePreview?url=' + encodeURIComponent(this.base64Encode(file))
            // this.$demoFile + response
            this.$message.warning("doc、docx文件暂只支持下载查看")
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url = this.$demoFile + response
            // this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(this.base64Encode(this.$demoFile + response));
            // this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(this.base64Encode(file));
            // this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(this.$demoFile + response);
            // this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(file);
          } else {
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url = this.$demoFile + response;
          }
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkCss.width = JSON.parse(JSON.stringify(this.imgClass.width));
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkCss.height = JSON.parse(JSON.stringify(this.imgClass.height));
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkStart = JSON.parse(JSON.stringify(this.linkStart))
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkstr = JSON.parse(JSON.stringify(this.linkstr))
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkImageName = response;
          this.url2 = null
          this.url = null
          this.linkStart = -1
          this.linkstr = ""
          let txt = window.getSelection(); //获取鼠标划过的对象
          if (txt.toString().length > 0) {
            // 判断是否有选中内容且未被折叠（即非光标位置）
            txt.removeAllRanges(); // 移除选中范围
          }
        }
      }, 1000);
    },

    // 添加链接按钮点击事件
    addLink() {
      // 文本鼠标选择事件
      let txt = window.getSelection(); //获取鼠标划过的对象
      if (txt.toString().length > 0) {
        //获取划过的文字在文本中的起始位置
        this.linkStart = this.$refs.myTextarea.$refs.textarea.selectionStart;
        //获取鼠标选中内容
        this.linkstr = txt.toString();
      } else {
        if (this.pageOne && this.pageOne.textLists[this.textIndex] && this.pageOne.textLists[this.textIndex].url) {
          this.linkstr = "";
          this.$message({message: "请删除之前链接再添加！", type: "warning",});
        } else {
          this.linkstr = "";
          this.$message({
            message: "请在文本框中选中添加链接的文字！",
            type: "warning",
          });
        }
      }
    },
    delLink() {
      if (
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url
      ) {
        let imageName = this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkImageName;
        axios
            .post(
                this.$demo + "/delImage",
                {},
                {params: {imageName: imageName}}
            )
            .then((response) => {
              this.$message.success("链接删除成功");
              this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].url = "";
              this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkStart = -1;
              this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkstr = "";
              this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkImageName = "";
              this.$refs.linkUpload.clearFiles();
            })
            .catch((error) => {
              console.error(error);
            });
      }
    },
    beforeImageUpload(file) {
      const {name} = file;
      const fileName = name.substring(name.lastIndexOf(".")).toLowerCase();
      const fileTypeFlag = /^.png|.jpg|.jpeg|.gif|.txt|.doc|.docx|.xls|.xlsx|.pdf$/.test(fileName);
      const isLt500K = file.size / 1024 / 1024 < 5;
      if (!fileTypeFlag) {
        this.$message.error("文件类型只能是.png|.jpg|.jpeg|.gif|.doc|.docx|.xls|.xlsx|.pdf|.txt");
        return false;
      } else if (!isLt500K) {
        this.$message.error("上传图片大小不能超过 5MB!");
        return false;
      } else {
        if (fileName == ".txt") {
          this.imgClass.height = "auto";
        } else if (fileName == ".doc" || fileName == ".docx" || fileName == ".xls" || fileName == ".xlsx") {
          console.log("word和Excel");
        } else if (fileName == ".pdf") {
          this.imgClass.width = "600px";
          this.imgClass.height = "500px";
        } else {
          return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = (e) => {
              const img = new Image();
              img.onload = () => {
                if (img.width > 1000) {
                  this.imgClass.width = img.width / 2 + "px";
                  this.imgClass.height = img.height / 2 + "px";
                } else if (img.height > 900) {
                  this.imgClass.width = img.width / 2 + "px";
                  this.imgClass.height = img.height / 2 + "px";
                } else {
                  this.imgClass.width = img.width + "px";
                  this.imgClass.height = img.height + "px";
                }
                resolve(file);
              };
              img.src = e.target.result;
            };
            reader.readAsDataURL(file);
          });
        }
      }
    },
    /*
     * 画面
     * */
    openPolygonPopup() {
      if (this.titleIndex === "" || this.pageIndex === "") {
        this.$message.warning("请选择页面");
      } else {
        this.showPolygonPopup = true;
        this.showPolylinePopup = false;
        this.showTourEdt = false;
        this.showInfoTree = false;
        this.showFastLine = false;
        this.showCarEdt = false;
        this.showPageEdt = false;
        this.showMarkerEdt = false;
        this.showAnimationImage = false;
        this.showAnalysisTools = null
      }
    },
    openPolylinePopup() {
      if (this.titleIndex === "" || this.pageIndex === "") {
        this.$message.warning("请选择页面");
      } else {
        this.showPolylinePopup = true;
        this.showPolygonPopup = false;
        this.showTourEdt = false;
        this.showInfoTree = false;
        this.showFastLine = false;
        this.showCarEdt = false;
        this.showPageEdt = false;
        this.showMarkerEdt = false;
        this.showAnimationImage = false;
        this.showAnalysisTools = null
      }
    },

    // 文本选择
    selectText(command) {
      this.textIndex = command;
      this.textText = this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[command].text;
      this.textSize = this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[command].class.fontSize.match(/\d+/);
      this.textColor = this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[command].class.color;
      this.textBjColor = this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[command].class.backgroundColor;
      this.showTextEdtMenu = true;
    },
    //添加文本框
    addText() {
      if (this.pageName) {
        let length = this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.length;
        const timestamp = new Date().getTime();
        let one = {
          text: "", //文本框的文字
          id: `text${timestamp}`,
          class: {
            width: "400px",
            height: "35px",
            fontSize: "18px",
            color: "#000000",
            left: "300px",
            top: "100px",
          },
          url: "",
          linkCss: {
            width: "",
            height: "",
          },
          linkImageName: "",
          linkStart: -1,
          linkstr: "",
          showPageName: this.pageName,
        };
        this.textIndex = length;
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.push(one);
        this.selectText(length);
      } else {
        this.$message.warning("请选择页面");
      }
    },
    //删除文本框
    delText() {
      this.showTextEdtMenu = false;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.splice(this.textIndex, 1);
      if (this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.length > 0) {
        this.selectText(this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.length - 1)
      }
    },
    addMoreText() {
      if (this.pageName) {
        let length = this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.length;
        const timestamp = new Date().getTime();
        let one = {
          text: '<p>hi</p>', //文本框的文字
          id: `text${timestamp}`,
          class: {
            width: "400px",
            height: "100px",
            fontSize: "18px",
            color: "#000000",
            left: "300px",
            top: "100px",
          },
          showPageName: this.pageName,
        };
        this.textIndex = length;
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.push(one);
        this.selectMoreText(length, false);
      } else {
        this.$message.warning("请选择页面");
      }
    },
    selectMoreText(command, flag) {
      console.log('command', command)
      this.textIndex = command;
      this.textText = this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[command].text;
      console.log(this.textText)
      this.showTextEdtMenu2 = true;
      this.$nextTick(() => {
        if (flag) {
          // this.$refs.myQuillEditor.content = this.textText;
          this.$refs.myQuillEditorW.html2 = this.textText;
        }
      });
    },
    delMoreText() {
      this.showTextEdtMenu2 = false;
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.splice(this.textIndex, 1);
      if (this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.length > 0) {
        this.selectMoreText(this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists.length - 1, true)
      }
    },
    updateText(newContent) {
      this.pageOne.textLists[this.textIndex].text = newContent;
    },
    //设置文字字体大小
    setTextSize() {
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].class.fontSize = this.textSize + "px";
    },
    //设置文字颜色
    setTextColor() {
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].class.color = this.textColor;
    },
    //文本填充颜色
    setTextBjColor() {
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].class.backgroundColor = this.textBjColor;
    },
    //保存标签的文本
    saveText() {
      this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].text = this.textText;
      if (this.textText === "") {
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkstr = "";
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[this.textIndex].linkStart = -1;
        this.linkstr = "";
      }
    },
    // 截取链接前文字
    getSubstringAfter(str, index) {
      if (index !== -1) {
        if (str) {
          return str.substring(0, index);
        }
      }
      return str;
    },
    // 截取链接后文字
    getSubstringBefore(str, str2, index) {
      if (index !== -1) {
        if (str) {
          return str.slice(index + str2.length);
        }
      }
      return "";
    },
    // 保存位置
    saveTextLeftAndTop(id, index) {
      let dom = document.getElementById(id);
      if (index > -1) {
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[index].class.left = dom.style.left;
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[index].class.top = dom.style.top;
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[index].class.width = dom.style.width;
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].textLists[index].class.height = dom.style.height;
      } else {
        this.editorClass.left = dom.style.left;
        this.editorClass.top = dom.style.top;
      }
    },

    /*
     * 点击页面
     * */
    //左侧列表，点击页面，提交页面的参数
    async postPageAll(indexF, page, indexC) {
      if ((this.titleIndex !== indexF || this.pageIndex !== indexC) && (this.titleIndex !== "" || this.pageIndex !== "")) {
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].showClick = false;
        if (this.polylineIds.length !== 0) {
          __g.polyline.delete(this.polylineIds);
        }
        this.polylineIds = [];
        if (this.polygonIds.length !== 0) {
          __g.polygon.delete(this.polygonIds);
        }
        this.polygonIds = [];
        this.showPolylinePopup = false;
        this.showPolygonPopup = false;
      }
      page.showClick = true;
      //重置变量
      this.stopFXGJ();
      this.changePageDelMarker();
      this.changePageDelCar();
      this.showTextEdtMenu = false;
      this.showTextEdtMenu2 = false;
      this.showChartEdtMenu = false;
      this.chartIndex = -1;
      this.markerFlag = false;
      // this.newPolylineFlag = false;
      // this.newPolygonFlag = false;
      // this.polylineCoordinates = [];
      // this.polygonCoordinates = [];
      //传递参数
      this.pageName = page.pageName;
      this.titleName = this.titleLists[indexF].titleName;
      console.log(this.titleName, this.pageName);
      this.titleIndex = indexF;
      this.pageIndex = indexC;
      console.log(this.titleIndex, this.pageIndex);
      this.pageOne = page;
      this.setImage(page.imageLists);
      nextTick(() => {
        this.setText();
        this.setChart(page.chartLists);
        this.setShape();
      });
      if (page.apiLists !== []) {
        for (let i = 0; i < page.apiLists.length; i++) {
          if (page.apiLists[i].api === 'FluidSimulation') {
            await __g.fluid.add(page.apiLists[i].object);
            __g.fluid.focus(page.apiLists[i].object.id, 30, 2);
            __g.fluid.continueSource(page.apiLists[i].data);
          }
        }
      }
      this.setCamera(page.pageView);
      // this.setLayer(page.pageTrees);
      await this.setNodes(page.pageTrees);
      await this.setMarker(page.markerLists);
      await this.setCar(page.carLists);
      await this.setPolyline(page.polylineLists);
      await this.setPolygon(page.polygonLists);
    },
    async setMarker(markerLists) {
      if (markerLists.length > 0) {
        for (let i = 0; i < markerLists.length; i++) {
          this.markerIds.push(markerLists[i].id);
        }
        await __g.marker.add(markerLists);
      }
    },
    async setCar(carLists) {
      if (carLists.length > 0) {
        for (let i = 0; i < carLists.length; i++) {
          this.carIds.push(carLists[i].id);
        }
        await __g.vehicle.add(carLists);
      }
    },
    setChart(charts) {
      if (charts && charts.length > 0) {
        charts.forEach((value, index) => {
          let dom = document.getElementById(value.id);
          const progressChart = echarts.init(dom);
          progressChart.setOption(value.options);
        });
        this.chartIndex = charts.length - 1;
      }
    },
    // 设置形状数据
    setShape() {
      if (this.pageOne.shapeLists && this.pageOne.shapeLists.length > 0) {
        this.selectShape(this.pageOne.shapeLists.length - 1);
      } else {
        this.shapeIndex = null;
        this.showShapeEdtMenu = false;
      }
    },
    // 设置文本下拉框选择值
    setText() {
      if (this.pageOne.textLists && this.pageOne.textLists.length > 0) {
        this.selectText(this.pageOne.textLists.length - 1);
      } else {
        this.textIndex = null;
        this.showTextEdtMenu2 = false;
      }
    },
    //回显上传图片列表
    setImage(imageLists) {
      this.imageList = [];
      if (imageLists.length > 0) {
        for (let i = 0; i < imageLists.length; i++) {
          this.imageList.push(imageLists[i].image);
        }
      } else {
        this.imageList = [];
      }
    },
    async setPolygon(polygonLists) {
      //之前不存在
      if (this.polygonIds.length !== 0) {
        __g.polygon.delete(this.polygonIds);
      }
      this.polygonIds = [];
      if (polygonLists.length !== 0) {
        for (let i = 0; i < polygonLists.length; i++) {
          this.polygonIds.push(polygonLists[i].id);
        }
        await __g.polygon.add(polygonLists);
      }
    },
    async setPolyline(polylineLists) {
      //之前存在
      if (this.polylineIds.length !== 0) {
        __g.polyline.delete(this.polylineIds);
      }
      this.polylineIds = [];
      if (polylineLists.length !== 0) {
        for (let i = 0; i < polylineLists.length; i++) {
          this.polylineIds.push(polylineLists[i].id);
        }
        await __g.polyline.add(polylineLists);
      }
    },
    //比较前后页面的线面数组的id
    compareIds(oldArray, newArray) {
      const existingElements = [];
      const newElements = [];
      const missingElements = [];

      for (let i = 0; i < oldArray.length; i++) {
        if (newArray.includes(oldArray[i])) {
          existingElements.push(oldArray[i]);
        } else {
          missingElements.push(oldArray[i]);
        }
      }

      for (let i = 0; i < newArray.length; i++) {
        if (!oldArray.includes(newArray[i])) {
          newElements.push(newArray[i]);
        }
      }

      return {
        existingElements,
        newElements,
        missingElements,
      };
    },
    //设置page视角，并在点击页面时，重绘相机位置
    setCamera(pageView) {
      if (pageView.x !== 0 && pageView.y !== 0) {
        __g.camera.set(
            pageView.x,
            pageView.y,
            pageView.z,
            pageView.pitch,
            pageView.yaw,
            2
        );
      }
    },
    setLayer(pageTrees) {
      if (pageTrees.length === 0) {
        console.log("No pageLayer specified");
        // __g.infoTree.show("ProjectTree_Root");
        // __g.infoTree.hide([
        //   "DA8BD04F4531CF05F02BE8AB83E8C533", //土方调配
        //   "A2CB69564E148F481EA264A493DDBFE3", //地块分析
        //   "B64495B947A29FBE02E663880C29F550", //冲突分析
        // ]);
      } else {
        __g.infoTree.hide("ProjectTree_Root");
        __g.infoTree.show(pageTrees);
      }
    },
    //设置之前选择的节点
    async setNodes(pageTrees) {
      if (pageTrees.length === 0) {
        console.log("keep infoTree last one page");
      } else {
        let lastTree = this.$refs.infoTree.getCheckedKeys()
        console.log(lastTree, pageTrees)
        let objTree = this.findUniqueStrings(lastTree, pageTrees)
        await this.hideInfoTreeIds(objTree[0])
        await this.showInfoTreeIds(objTree[1])
        console.log(objTree);
        console.log("setCheckedNodes choose");
      }
    },
    findUniqueStrings(lastTree, pageTrees) {
      const oldTree = new Set(lastTree);
      const newTree = new Set(pageTrees);
      let hide = [];
      let flag1 = false
      let flag2 = false
      for (const item of oldTree) {
        if (!newTree.has(item)) {
          hide.push(item);
        }
        if (item === 'ProjectTree_Root') {
          flag1 = true
        }
      }
      const show = [];
      for (const item of newTree) {
        if (!oldTree.has(item)) {
          show.push(item);
        }
        if (item === 'ProjectTree_Root') {
          flag2 = true
        }
      }
      if (flag2) {
        //全显示
      } else {
        if (flag1) {
          hide = hide.filter(item => item !== 'ProjectTree_Root');
        }
      }
      return [hide, show];
    },
    /*
     * 顶部右边的分析工具方法
     * */
    //API
    chooseCLGJ(command) {
      this.showInfoTree = false;
      this.showPageEdt = false;
      this.showCarEdt = false;
      this.showMarkerEdt = false;
      this.showTourEdt = false;
      this.showFastLine = false;
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      this.showAnimationImage = false;
      let options = {
        pointSize: 20.0,
        textSize: 20.0,
        textColor: "#FFB6C1",
        pointColor: [0, 0, 1, 0.3],
        lineColor: "#1E90FF",
        areaColor: [0, 1, 0, 0.3], //红绿蓝透明度，取值范围：[0~1.0]，按RGBA颜色值比例缩小255倍
        showCoordinateText: false, //是否显示坐标测量的文本
      };
      switch (command) {
        case "1":
          __g.tools.setMeasurement(1, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式1");
          });
          break;
        case "2":
          __g.tools.setMeasurement(2, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式2");
          });
          break;
        case "3":
          __g.tools.setMeasurement(3, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式3");
          });
          break;
        case "4":
          __g.tools.setMeasurement(4, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式4");
          });
          break;
        case "5":
          __g.tools.setMeasurement(5, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式5");
          });
          break;
        case "6":
          __g.tools.setMeasurement(6, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式6");
          });
          break;
        case "0":
          __g.tools.stopMeasurement();
          break;
        default:
          break;
      }
      __g.settings.setRenderedCursorVisible(false);
    },
    choosePQGJ(command) {
      switch (command) {
        case "1":
          this.setVolumeClip();
          break;
        case "2":
          this.setPlaneClip();
          break;
        case "0":
          this.clearClip();
          break;
        default:
          break;
      }
    },
    //剖切
    setVolumeClip() {
      this.VolumeClip_flag = true;
      console.log("选择剖切位置");
    },
    volumeClip_event(x, y, z) {
      //bbox的对角线的两个点的位置，通过延展x,y,z的两两夹面，让两点相交形成空间体bbox
      let bbox = [x - 20, y - 20, z - 20, x + 20, y + 20, z + 20];
      //0：正向剖切，1：反向剖切
      let direction = 0;
      // 剖切时是否显示剖切范围的包围盒,默认false
      let isShowBBox = false;
      // 剖切时是否可交互编辑，默认false
      let isEditable = true;
      /*
      rotation的三个参数:
      Pitch：上下旋转角度，，欧拉角向量的X轴,取值范围：[-90~+90]
      Yaw：左右旋转角度，，欧拉角向量的Y轴,取值范围：[-180~+180]
      Roll：翻滚角度，欧拉角向量的Z轴
       */
      let rotation = [0, 0, 0];
      __g.tools.startVolumeClip(
          bbox,
          direction,
          isShowBBox,
          isEditable,
          rotation,
          function () {
            console.log("开始体剖");
          }
      );
      __g.settings.setRenderedCursorVisible(false);
      this.VolumeClip_flag = false;
    },
    stopVolumeClip() {
      __g.tools.stopVolumeClip();
    },
    //竖剖
    setPlaneClip() {
      this.PlaneClip_flag = true;
      console.log("选择竖剖位置");
    },
    async planeClip_event(x, y, z) {
      let bbox = [x, y, z];
      let camera = await __g.camera.get();
      let rotation = [camera.pitch, camera.yaw + 90, 0];
      let isShowBBox = false;
      let isEditable = true;
      __g.tools.startPlaneClip(bbox, rotation, isShowBBox, isEditable);
      __g.settings.setRenderedCursorVisible(false);
      this.PlaneClip_flag = false;
    },
    stopPlaneClip() {
      __g.tools.stopPlaneClip();
      __g.settings.setRenderedCursorVisible(false); //处理异常bug
    },
    //清除所有剖切
    clearClip() {
      this.VolumeClip_flag = false;
      this.PlaneClip_flag = false;
      this.stopVolumeClip();
      this.stopPlaneClip();
    },

    chooseFXGJ(command) {
      console.log("chooseFXGJ");
      this.showInfoTree = false;
      this.showPageEdt = false;
      this.showCarEdt = false;
      this.showMarkerEdt = false;
      this.showTourEdt = false;
      this.showFastLine = false;
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      this.showAnimationImage = false;
      switch (command) {
        case "1":
          this.showAnalysisTools = 'SkyLine'
          // this.startSkyline();
          break;
        case "2":
          this.showAnalysisTools = 'ViewShed'
          // this.ViewshedAnalysis_flag = true;
          break;
        case "3":
          this.showAnalysisTools = 'FloodFill'
          // this.startFloodFill_flag = true;
          break;
        case "4":
          this.showAnalysisTools = 'InterVisibility'
          // this.startVisiblity();
          break;
        case "5":
          this.showAnalysisTools = 'ViewDome'
          // this.startViewDome();
          break;
        case "6":
          this.showAnalysisTools = 'Sunshine'
          // this.startSunshine();
          break;
        case "7":
          this.showAnalysisTools = 'TerrainSlope'
          // this.startTerrainSlope();
          break;
        case "8":
          this.showAnalysisTools = 'ContourLine'
          // this.startContourLine();
          break;
        case "9":
          this.showAnalysisTools = 'FluidSimulation'
          break;
        case "0":
          this.showAnalysisTools = null
          this.stopFXGJ();
          break;
        default:
          break;
      }
    },
    stopFXGJ() {
      __g.tools.stopSkylineAnalysis(); //天际线
      __g.tools.stopSunshineAnalysis(); //日照分析
      __g.tools.stopViewshedAnalysis();
      __g.tools.stopContourLineAnalysis(); //等高线
      __g.floodFill.clear(); //水淹
      __g.fluid.clear(); //水淹
      __g.tools.stopVisiblityAnalysis(); //通视分析
      __g.tools.stopViewDomeAnalysis(); //开敞度
      __g.tools.stopTerrainSlopeAnalysis(); //坡度坡向
      __g.tools.stopFloodFill(); //水淹
    },

    /*
     *
     * 左侧列表的操作方法
     * */
    setFormWork(command) {
      this.formWork = ""
      this.$confirm('此操作将清空现有所有内容, 是否继续?', '切换模板', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '切换成功!'
        });
        switch (command) {
          case "formWork1":
            this.titleLists = this.titleLists001;
            break;
          case "formWork2":
            this.titleLists = this.titleLists000;
            break;
          case "formWork3":
            this.titleLists = this.titleLists000;
            break;
          case "formWork0":
            this.titleLists = this.titleLists000;
            break;
          default:
            break;
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消切换'
        });
      });
    },
    //左侧列表，点击标题展示页面的图标的变化
    changeListOneIcon(item) {
      // 根据当前图标的class来切换至不同的图标
      if (item.showTitlePage) {
        item.showTitlePage = false;
        item.iconClass = "body-title-icon ri-arrow-drop-right-line";
      } else {
        item.showTitlePage = true;
        item.iconClass = "body-title-icon ri-arrow-drop-down-line";
      }
    },
    // 添加标题
    addTitle() {
      this.savedText = this.inputTextAddTitle.trim();
      if (this.savedText.length > 8) {
        this.$message.error("标题不超过8个字");
      } else {
        this.inputTextAddTitle = "";
        this.showPopupAddTitle = false;
        let titleNum = this.titleLists.length + 1;
        if (titleNum === 9) {
          this.$message.error("不超过9个标题");
        } else {
          if (this.savedText === "") {
            this.savedText = "标题" + titleNum;
          }
          let one = {
            titleName: this.savedText,
            titleClass: "",
            iconClass: "body-title-icon ri-arrow-drop-down-line",
            showTitlePage: true,
            pageLists: [
              {
                showClick: false,
                pageName: "分页1",
                pageView: {
                  x: 0,
                  y: 0,
                  z: 0,
                  pitch: 0,
                  yaw: 0,
                },
                pageUrl: "./th.jpg",
                pageTrees: [],
                textLists: [],
                chartLists: [],
                imageLists: [],
                polylineLists: [],
                carLists: [],
                polygonLists: [],
                apiLists: [],
                markerLists: [],
                shapeLists: [],
              },
            ],
          };
          console.log(this.addTitleIndex)
          if (this.titleIndex !== "" && this.pageIndex !== "") {
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].showClick = false;
          }
          if (this.addTitleIndex !== null) {
            console.log("add title after", this.titleLists[this.addTitleIndex].titleName);
            //!首页不可替代!
            this.titleLists.splice(this.addTitleIndex + 1, 0, one);
          } else {
            console.log("add title last");
            this.titleLists.push(one);
          }
          this.addTitleIndex = null;
        }
      }
      this.clearPage();
    },
    //删除标题
    deleteTitle(index) {
      console.log(index);
      this.clearPage();
      if (this.titleLists.length > 1) {
        for (let i = 0; i < this.titleLists[index].pageLists.length; i++) {
          if (!this.titleLists[index].pageLists[i].pageUrl.startsWith('data:image/')) {
            let name = this.getFileNameFromUrl(this.titleLists[index].pageLists[i].pageUrl)
            axios.post(this.$demo + "/delImage", {}, {params: {imageName: name}}).then((response) => {
              console.log(response)
            }).catch((error) => {
              console.error(error);
            });
          }
        }
        this.titleLists.splice(index, 1);
        console.log("del title");
      } else {
        this.$message.error("最少保留一页！");
      }
    },
    //页面初始化
    clearPage() {
      this.changePageDelMarker();
      this.changePageDelCar();
      this.imageList = [];
      this.setClickFalse();
      this.titleIndex = "";
      this.pageIndex = "";
      this.pageName = "";
      this.titleName = "";
      this.inputReportName = "";
      this.chartIndex = -1;
      this.addDataIndex = null;
      this.showAddData = false;
      this.delDataIndex = [];
      this.showDelData = false;
      this.newX = null;
      this.newY = null;
      this.showChartEdtMenu = false;
      this.markerFlag = false;
      // this.newPolylineFlag = false;
      // this.newPolygonFlag = false;
      // this.polylineCoordinates = [];
      // this.polygonCoordinates = [];
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      if (this.polylineIds.length !== 0) {
        __g.polyline.delete(this.polylineIds);
      }
      this.polylineIds = [];
      if (this.polygonIds.length !== 0) {
        __g.polygon.delete(this.polygonIds);
      }
      this.polygonIds = [];
    },
    // 添加页面
    addPage(indexF) {
      this.clearPage();
      let length = this.titleLists[indexF].pageLists.length;
      let one = {
        showClick: false,
        pageName: "分页" + (length + 1),
        pageView: {
          x: 0,
          y: 0,
          z: 0,
          pitch: 0,
          yaw: 0,
        },
        pageUrl: "./th.jpg",
        pageTrees: [],
        textLists: [],
        chartLists: [],
        imageLists: [],
        polylineLists: [],
        carLists: [],
        polygonLists: [],
        apiLists: [],
        markerLists: [],
        shapeLists: [],
      };
      this.titleLists[indexF].pageLists.push(one);
    },
    //删除页面
    deletePage(item, index) {
      if (item.pageLists.length > 1) {
        this.clearPage();
        if (!item.pageLists[index].pageUrl.startsWith('data:image/')) {
          let name = this.getFileNameFromUrl(item.pageLists[index].pageUrl)
          axios.post(this.$demo + "/delImage", {}, {params: {imageName: name}}).then((response) => {
            console.log(response)
          }).catch((error) => {
            console.error(error);
          });
        }
        item.pageLists.splice(index, 1);
      } else {
        this.$message({
          message: "最少保留一页！",
          type: "warning",
        });
      }
    },
    getFileNameFromUrl(url) {
      return url.substring(url.lastIndexOf('/') + 1);
    },
    //设置页面的点击框失效
    setClickFalse() {
      if (this.titleIndex !== "" || this.pageIndex !== "") {
        this.titleLists[this.titleIndex].pageLists[
            this.pageIndex
            ].showClick = false;
        console.log(
            this.titleLists[this.titleIndex].pageLists[this.pageIndex].showClick
        );
      }
    },

    /*
     * 顶部菜单的一系列操作
     *
     * */
    //保存方案
    saveReportPop() {
      this.showBCFA = true;
      this.inputReportName = this.reportPlanName;
    },
    async saveToLocalStorage() {
      this.savedText = this.inputReportName.trim();
      if (this.savedText.length > 12 || this.savedText.length === 0) {
        this.$message.error("汇报名称不能为空且不超过12个字");
      } else {
        this.inputReportName = "";
        let name = this.reportPlanName;
        if (this.titleIndex !== "" || this.pageIndex !== "") {
          this.titleLists[this.titleIndex].pageLists[
              this.pageIndex
              ].showClick = false;
        }
        if (this.reportKey === "new" || this.reportKey === "") {
          this.post();
        } else {
          await this.edt(name);
        }
      }
      this.clearPage();
    },
    //顶部菜单，显示图层树
    async infoTreeEdt0() {
      //获取图层树的信息
      let trees = await __g.infoTree.get();
      console.log(trees);
      this.infoTrees = trees.infotree;
      let index;
      let index1;
      let currentItem;
      while (this.infoTrees.length > 1) {
        let arr1 = JSON.parse(JSON.stringify(this.infoTrees));
        arr1.forEach((currentItem) => {
          // 思想：从最末级向上生成树
          if (!this.infoTrees.some((item) => {
            return item.parentIndex === currentItem.index;
          })) {
            // 找当前项在arr数组中是否存在子节点，如果当前项不存在子节点
            index = this.infoTrees.findIndex((item, index) => {
              // 找当前项的父节点在arr数组中的索引
              return item.index === currentItem.parentIndex;
            });
            index1 = this.infoTrees.findIndex((item, index) => {
              // 找当前项在arr数组中的索引
              return item.index === currentItem.index;
            });
            if (index !== -1) {
              // 找到当前项对应的父节点了，并拿到对应的父节点的数组索引了
              if (!this.infoTrees[index].children) {
                this.infoTrees[index].children = [];
              }
              this.infoTrees[index].children.push(this.infoTrees[index1]);
              this.infoTrees.splice(index1, 1); // 在arr中删除当前项
            }
          }
        });
      }
      console.log(JSON.parse(JSON.stringify(this.infoTrees)));
      this.showInfoTree = true;
      this.showPageEdt = false;
      this.showTourEdt = false;
      this.showFastLine = false;
      this.showMarkerEdt = false;
      this.showCarEdt = false;
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      this.showAnimationImage = false;
      this.showAnalysisTools = null
    },
    async getInfoTree() {
      //获取图层树的信息
      let trees = await __g.infoTree.get();
      console.log(trees);
      this.infoTrees = trees.infotree;
      let index;
      let index1;
      let currentItem;
      while (this.infoTrees.length > 1) {
        let arr1 = JSON.parse(JSON.stringify(this.infoTrees));
        arr1.forEach((currentItem) => {
          // 思想：从最末级向上生成树
          if (
              !this.infoTrees.some((item) => {
                return item.parentIndex === currentItem.index;
              })
          ) {
            // 找当前项在arr数组中是否存在子节点，如果当前项不存在子节点
            index = this.infoTrees.findIndex((item, index) => {
              // 找当前项的父节点在arr数组中的索引
              return item.index === currentItem.parentIndex;
            });
            index1 = this.infoTrees.findIndex((item, index) => {
              // 找当前项在arr数组中的索引
              return item.index === currentItem.index;
            });
            if (index !== -1) {
              // 找到当前项对应的父节点了，并拿到对应的父节点的数组索引了
              if (!this.infoTrees[index].children) {
                this.infoTrees[index].children = [];
              }
              this.infoTrees[index].children.push(this.infoTrees[index1]);
              this.infoTrees.splice(index1, 1); // 在arr中删除当前项
            }
          }
        });
      }
      console.log(JSON.parse(JSON.stringify(this.infoTrees)));
      this.infoTrees.splice(0, 0, {iD: 'plant', name: '植物', type: 'plant', visiblity: true});
    },
    async infoTreeEdt() {
      this.showInfoTree = true;
      this.showPageEdt = false;
      this.showTourEdt = false;
      this.showFastLine = false;
      this.showMarkerEdt = false;
      this.showCarEdt = false;
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      this.showAnimationImage = false;
      this.showAnalysisTools = null
    },
    setChildNodesF(childNodes) {
      childNodes.forEach(item => {
        item.data.visiblity = false
        if (item.childNodes) {
          this.setChildNodesF(item.childNodes)
        }
      })
    },
    setChildNodesT(childNodes) {
      childNodes.forEach(item => {
        item.data.visiblity = true
        if (item.childNodes) {
          this.setChildNodesT(item.childNodes)
        }
      })
    },
    setChildrenF(children) {
      children.forEach(item => {
        item.visiblity = false
        if (item.children) {
          this.setChildrenF(item.children)
        }
      })
    },
    setChildrenT(children) {
      children.forEach(item => {
        item.visiblity = true
        if (item.children) {
          this.setChildrenT(item.children)
        }
      })
    },
    hideInfoTreeIds(ids) {
      __g.infoTree.hide(ids);
      for (let id of ids) {
        if (id === 'plant') {
          __g.misc.hideAllFoliages();
        }
        let node = this.$refs.infoTree.getNode(id);
        if (node && node.data && node.data.visiblity) {
          node.data.visiblity = false;
          if (node.childNodes.length > 0) {
            this.setChildNodesF(node.childNodes);
          }
        }
        this.$refs.infoTree.setChecked(id, false, true);
      }
    },
    showInfoTreeIds(ids) {
      __g.infoTree.show(ids);
      for (let id of ids) {
        if (id === 'plant') {
          __g.misc.showAllFoliages();
        }
        let node = this.$refs.infoTree.getNode(id);
        if (node && node.data && !node.data.visiblity) {
          node.data.visiblity = true;
          if (node.childNodes.length > 0) {
            this.setChildNodesT(node.childNodes);
          }
        }
        this.$refs.infoTree.setChecked(id, true, true);
      }
    },
    checkVisibility(children) {
      for (let obj of children) {
        if (!obj.visiblity) {
          console.log(obj.name, obj.visiblity)
          return false;
        }
        if (obj.children && obj.children.length > 0) {
          if (!this.checkVisibility(obj.children)) {
            return false;
          }
        }
      }
      return true;
    },
    checkInfoTree(node) {
      if (node.type === 'plant') {
        if (node.visiblity) {
          __g.misc.hideAllFoliages()
        } else {
          __g.misc.showAllFoliages()
        }
        node.visiblity = !node.visiblity
      } else if (node.type === 'EPT_Folder') {
        let allVisible = this.checkVisibility(node.children)
        if (allVisible) {
          __g.infoTree.hide(node.iD);
          if (node.children.length > 0) {
            this.setChildrenF(node.children);
          }
          this.$refs.infoTree.setChecked(node.iD, false, true);
        } else {
          __g.infoTree.show(node.iD);
          if (node.children.length > 0) {
            this.setChildrenT(node.children);
          }
          this.$refs.infoTree.setChecked(node.iD, true, true);
        }
        node.visiblity = !allVisible;
      } else {
        if (node.visiblity) {
          __g.infoTree.hide(node.iD);
        } else {
          __g.infoTree.show(node.iD);
        }
        node.visiblity = !node.visiblity;
      }
    },
    //保存图层
    saveLayer() {
      if (this.titleIndex === "" || this.pageIndex === "" || this.pageName === "" || this.titleName === "") {
        this.$message({message: "请选择要修改的页面", type: "warning",});
      } else {
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageTrees = this.$refs.infoTree.getCheckedKeys();
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageTrees.push();
        console.log(this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageTrees)
        this.$message({message: "图层保存成功", type: "success",});
        console.log("save");
      }
    },
    //顶部菜单，显示标签编辑
    markerEdt() {
      if (this.titleIndex === "" || this.pageIndex === "") {
        this.$message.warning("请选择页面");
      } else {
        this.showTourEdt = false;
        this.showInfoTree = false;
        this.showFastLine = false;
        this.showCarEdt = false;
        this.showPageEdt = false;
        this.showMarkerEdt = true;
        this.showPolylinePopup = false;
        this.showPolygonPopup = false;
        this.showAnimationImage = false;
        this.showAnalysisTools = null
      }
    },
    //顶部菜单，显示分页编辑
    pageEdt() {
      this.showFastLine = false;
      this.showInfoTree = false;
      this.showCarEdt = false;
      this.showPageEdt = true;
      this.showTourEdt = false;
      this.showMarkerEdt = false;
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      this.showAnimationImage = false;
      this.showAnalysisTools = null
    },
    //修改页面的名称
    savePageName() {
      //根据index修改
      if (
          this.titleIndex === "" ||
          this.pageIndex === "" ||
          this.pageName === "" ||
          this.titleName === ""
      ) {
        this.$message({
          message: "请选择要修改的页面",
          type: "warning",
        });
      } else {
        if (this.pageName.length > 7) {
          this.$message.error("不超过7个字");
        } else {
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageName =
              this.pageName;
          this.$message({
            message: "修改分页成功",
            type: "success",
          });
        }
      }
    },
    //修改标题的名称
    saveTitleName() {
      //根据index修改
      if (
          this.titleIndex === "" ||
          this.pageIndex === "" ||
          this.pageName === "" ||
          this.titleName === ""
      ) {
        this.$message({
          message: "请选择要修改的页面",
          type: "warning",
        });
      } else {
        if (this.titleName.length > 7) {
          this.$message.error("不超过7个字");
        } else {
          this.titleLists[this.titleIndex].titleName = this.titleName;
          this.$message({
            message: "修改标题成功",
            type: "success",
          });
        }
      }
    },
    //获取页面视角，保存在data里
    saveCamera() {
      if (this.pageName === "") {
        this.$message({
          message: "警告，请先选择页面",
          type: "warning",
        });
      } else {
        this.getBase64()
        __g.camera.get().then((res) => {
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageView.x = res.x;
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageView.y = res.y;
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageView.z = res.z;
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageView.pitch = res.pitch;
          this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageView.yaw = res.yaw;
          console.log("保存成功,坐标: ", res.x, res.y, res.z, res.pitch, res.yaw);
          this.$message({message: "视角保存成功", type: "success",});
        });
      }
    },
    getBase64() {
      html2canvas(this.$refs.content).then(canvas => {
        try {
          const png = canvas.toDataURL('image/png');
          console.log(png);
          this.showPng(png);
        } catch (error) {
          console.error('转换 DataURL 时发生错误:', error);
        }
      });
    },
    showPng(png) {
      const img = new Image();
      img.src = png;
      img.onload = () => {
        this.titleLists[this.titleIndex].pageLists[this.pageIndex].pageUrl = png;
      };
    },
    //导览
    async getAnimationList() {
      this.imgS = [];
      //获取所有导览列表
      let videos = await __g.camera.getAnimationList();
      let images = [];
      for (let i = 0; i < videos.data.length; i++) {
        //把导览名字取出来
        images[i] = JSON.stringify(videos.data[i].name).replace(/["']/g, "");
        //获取base64字符串
        __g.camera.getAnimationImage(images[i]).then((result) => {
          // 创建图像元素
          let img = {
            index: "",
            name: "",
            src: "",
          };
          // 设置src的图片
          img.src = "data:image/jpeg;base64," + result.image;
          img.name = images[i];
          img.index = i;
          //添加到页面的容器中
          this.imgS.push(img);
        });
      }
      console.log(this.imgS);
      this.showAnimationImage = !this.showAnimationImage;
      this.showFastLine = false;
      this.showInfoTree = false;
      this.showCarEdt = false;
      this.showPageEdt = false;
      this.showTourEdt = false;
      this.showMarkerEdt = false;
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      this.showAnalysisTools = null
    },
    tourEdt() {
      this.showInfoTree = false;
      this.showPageEdt = false;
      this.showCarEdt = false;
      this.showMarkerEdt = false;
      this.showTourEdt = true;
      this.showFastLine = false;
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      this.showAnimationImage = false;
      this.showAnalysisTools = null
    },
    playAnimation(imgOne) {
      __g.camera.playAnimation(imgOne.index, function () {
        console.log(imgOne.name);
      });
    },
    stopAnimation() {
      __g.camera.stopAnimation();
    },
    //顶部菜单，光影天气弹窗开关互斥
    submenuTQMN() {
      this.showTQMN = !this.showTQMN;
      this.showGYMN = false;
    },
    submenuGYMN() {
      this.showGYMN = !this.showGYMN;
      this.showTQMN = false;
    },
    //设置时间
    timeTypeClick() {
      this.timeBarFlag = false;
      console.log("timeTypeClick")
      let date = new Date(); //当前时间
      /*
      * getMonth()返回0-11
      * getFullYear()返回完整年份
      * */
      switch (this.sliderTime) {
        case 0:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 0, 0, false);
          break;
        case 5:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 2, 0, false);
          break;
        case 10:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 4, 0, false);
          break;
        case 15:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 5, 0, false);
          break;
        case 20:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 7, 0, false);
          break;
        case 25:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 8, 0, false);
          break;
        case 30:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 9, 0, false);
          break;
        case 35:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 10, 0, false);
          break;
        case 40:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 11, 0, false);
          break;
        case 45:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 12, 0, false);
          break;
        case 50:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 13, 0, false);
          break;
        case 55:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 14, 0, false);
          break;
        case 60:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 15, 0, false);
          break;
        case 65:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 16, 0, false);
          break;
        case 70:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 17, 0, false);
          break;
        case 75:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 18, 0, false);
          break;
        case 80:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 19, 0, false);
          break;
        case 85:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 20, 0, false);
          break;
        case 90:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 21, 0, false);
          break;
        case 95:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 22, 0, false);
          break;
        case 100:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 0, 0, false);
          break;
        default:
          break;
      }
    },
    timeTypeClick2() {
      if (this.isTimeBarFirst) {
        this.windy()
        this.isTimeBarFirst = false
      }
      if (this.timeBarFlag) {
        this.timeTypeClick()
      } else {
        setTimeout(() => {
          this.timeBarFlag = true;
        }, 50);
      }
    },
    timeTypeClickUp() {
      this.timeTypeClick()
      this.timeBarFlag = true
    },
    getSliderTime() {
      let date = new Date(); //当前时间
      let hour = date.getHours();
      switch (hour) {
        case 1:
        case 2:
          this.sliderTime = 0
          break;
        case 3:
        case 4:
          this.sliderTime = 5
          break;
        case 5:
          this.sliderTime = 10
          break;
        case 6:
          this.sliderTime = 15
          break;
        case 7:
          this.sliderTime = 20
          break;
        case 8:
          this.sliderTime = 25
          break;
        case 9:
          this.sliderTime = 30
          break;
        case 10:
          this.sliderTime = 35
          break;
        case 11:
          this.sliderTime = 40
          break;
        case 12:
          this.sliderTime = 45
          break;
        case 13:
          this.sliderTime = 50
          break;
        case 14:
          this.sliderTime = 55
          break;
        case 15:
          this.sliderTime = 60
          break;
        case 16:
          this.sliderTime = 65
          break;
        case 17:
          this.sliderTime = 70
          break;
        case 18:
          this.sliderTime = 75
          break;
        case 19:
          this.sliderTime = 80
          break;
        case 20:
          this.sliderTime = 85
          break;
        case 21:
          this.sliderTime = 90
          break;
        case 22:
          this.sliderTime = 95
          break;
        case 23:
        case 0:
          this.sliderTime = 100
          break;
        default:
          break;
      }
    },
    //天气
    setWeather(weather) {
      switch (true) {
        case weather.includes("雾"):
          this.whichFog(weather)
          break;
        case weather.includes("雨"):
          this.whichRain(weather)
          break;
        case weather.includes("雪"):
          this.whichSnow(weather)
          break;
        case weather.includes("晴"):
          console.log("晴")
          this.sunny()
          break;
        case weather.includes("风"):
          console.log("风")
          this.windy()
          break;
        default:
          console.log("???")
          this.normalWeather()
          break;
      }
    },
    whichFog(weather) {
      this.isRainOrSnow()
      switch (weather) {
        case "轻雾":
          console.log("轻雾")
          this.fog(0.5, 0.5, 50)
          break;
        case "大雾":
          console.log("大雾")
          this.fog(1, 0.45, 50)
          break;
        case "浓雾":
          console.log("浓雾")
          this.fog(1.5, 0.4, 30)
          break;
        case "强雾":
          console.log("强雾")
          this.fog(2, 0.35, 10)
          break;
        default:
          console.log("???")
          this.fog(0.75, 0.5, 75)
          break;
      }
    },
    whichRain(weather) {
      switch (weather) {
        case "小雨":
          console.log("小雨")
          this.rain(0.2, 0.2)
          break;
        case "中雨":
          console.log("中雨")
          this.rain(0.5, 0.2)
          break;
        case "大雨":
          console.log("大雨")
          this.rain(0.8, 0.2)
          break;
        case "暴雨":
          console.log("暴雨")
          this.rain(1, 0.5)
          break;
        default:
          console.log("???")
          this.rain(0.4, 0.2)
          break;
      }
    },
    whichSnow(weather) {
      switch (weather) {
        case "小雪":
          console.log("小雪")
          this.snow(0.2, 0)
          break;
        case "中雪":
          console.log("中雪")
          this.snow(0.4, 0.2)
          break;
        case "大雪":
          console.log("大雪")
          this.snow(0.7, 0.3)
          break;
        default:
          console.log("???")
          this.snow(0.3, 0.1)
          break;
      }
    },
    setAmbientLight(intensity) {
      __g.weather.setAmbientLightIntensity(intensity)
    },
    setCloud(density, thickness, height) {
      __g.weather.setCloudDensity(density)
      __g.weather.setCloudThickness(thickness)
      __g.weather.setCloudHeight(height)
    },
    setSun(intensity, size, temperature) {
      __g.weather.setSunIntensity(intensity)
      __g.weather.setSunSize(size)
      __g.weather.setTemperature(temperature)
    },
    fog(fogDensity, fogHeightFalloff, fogStartDistance) {
      this.isRainOrSnow()
      let fogColor = [1, 1, 1, 0]
      let fogOpacity = 1
      __g.weather.setFogParam(fogDensity, fogColor, fogHeightFalloff, fogStartDistance, fogOpacity)
    },
    rain(strength, speed) {
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      let raindropSize = 0.5;
      let rainColor = [0.5, 0.5, 0.5, 0.1]
      let alignCamera = 0.1
      let overcastStrength = 0.5
      __g.weather.setRainParam(strength, speed, raindropSize, rainColor, alignCamera, overcastStrength)
    },
    snow(strength, snowflakeSize) {
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      let speed = 0
      let snowColor = [1, 1, 1, 1]
      let alignCamera = 0.1
      __g.weather.setSnowParam(strength, speed, snowflakeSize, snowColor, alignCamera)
    },
    sunny() {
      this.isRainOrSnow()
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      this.setAmbientLight(2)
      this.setCloud(0.5, 0.3, 5)
      this.setSun(10, 2, 5500)
    },
    windy() {
      this.isRainOrSnow()
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      this.setAmbientLight(2)
      this.setCloud(1, 0.5, 15)
      this.setSun(7, 1, 5500)
    },
    normalWeather() {
      this.isRainOrSnow()
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      this.setAmbientLight(1)
      this.setCloud(1, 0.4, 10)
      this.setSun(5, 1, 5500)
    },
    isRainOrSnow() {
      let data = {}
      __g.weather.getParams().then(
          (result) => {
            data = result;
          }
      )
      if (data.rainsnow !== 0) {
        __g.weather.disableRainSnow()
      }
    },
    //选线
    showFastLineEdt() {
      this.showFastLine = !this.showFastLine;
      this.showMarkerEdt = false;
      this.showPageEdt = false;
      this.showCarEdt = false;
      this.showInfoTree = false;
      this.showTourEdt = false;
      this.showPolylinePopup = false;
      this.showPolygonPopup = false;
      this.showAnimationImage = false;
      this.showAnalysisTools = null
    },
    // 添加坐标到数组并更新显示
    addCoordinate() {
      if (
          isNaN(this.coordinate_x) ||
          isNaN(this.coordinate_y) ||
          this.coordinate_x.length === 0 ||
          this.coordinate_y.length === 0
      ) {
        alert("无效的坐标，请输入数字");
      } else {
        console.log(this.coordinate_x);
        let x = parseFloat(this.coordinate_x);
        let y = parseFloat(this.coordinate_y);
        let coordinate = [x, y];
        this.coordinates.push(coordinate);
        console.log(this.coordinates);
        this.coordinate_x = ""; // 清空输入框
        this.coordinate_y = ""; // 清空输入框
      }
    },
    // 删除特定坐标
    deleteCoordinate(index) {
      this.coordinates.splice(index, 1);
    },
    // 添加坐标到数组并更新显示
    addCoordinate3() {
      if (
          isNaN(this.coordinate3_x) ||
          isNaN(this.coordinate3_y) ||
          isNaN(this.coordinate3_z) ||
          this.coordinate3_y.length === 0 ||
          this.coordinate3_y.length === 0 ||
          this.coordinate3_z.length === 0
      ) {
        alert("无效的坐标，请输入数字");
      } else {
        let x = parseFloat(this.coordinate3_x);
        let y = parseFloat(this.coordinate3_y);
        let z = parseFloat(this.coordinate3_z);
        let coordinate3 = [x, y, z];
        this.coordinates3.push(coordinate3);
        console.log(this.coordinates3);
        this.coordinate3_x = ""; // 清空输入框
        this.coordinate3_y = ""; // 清空输入框
        this.coordinate3_z = ""; // 清空输入框
      }
    },
    // 删除特定坐标
    deleteCoordinate3(index) {
      this.coordinates3.splice(index, 1);
      this.addPolyLine_event2();
    },
    addPolygon_event(x, y, z) {
      this.coordinates3.push([x, y, z]);
      this.addPolygon_line(x, y, z);
    },
    async addPolygon_line(x, y, z) {
      __g.polyline.clear();
      //第一个点通过有固定位移的点来形成初始点
      if (this.coordinates3.length === 1) {
        //使用PolylineStyle样式的折线
        let ployLine = {
          //折线唯一标识id
          id: "ployLine_1",
          //构成折线的坐标点数组
          coordinates: [
            [x, y, z],
            [x + 1, y, z],
          ],
          //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          coordinateType: 0,
          //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
          range: [0, 100000],
          //折线颜色
          color: "#51F2FF",
          //线宽，单位：米，默认值20
          thickness: 1,
          //亮度，取值范围：[0~1000]，默认值：0.5
          intensity: 5,
          //流速，取值范围：[0~1.0]，默认值：0.5
          flowRate: 1,
          //样式，0：直线， 1：曲线，注意：设置为曲线坐标点多的时候会非常影响添加添加效率
          shape: 0,
          //是否做深度检测，默认为true，true会被遮挡，false不会被遮挡
          depthTest: false,
          //折线样式，箭头/光流/贴地/实线/虚线等，取值范围：[0~7]，详情参考 PolylineStyle
          style: PolylineStyle.Normal,
          //材质贴图平铺比例
          tiling: 0,
        };
        let pArr = [];
        pArr.push(ployLine);
        await __g.polyline.add(pArr);
      } else {
        //后续的点直接绘制
        let ployLine = {
          //折线唯一标识id
          id: "ployLine_1",
          //构成折线的坐标点数组
          coordinates: this.coordinates3,
          //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          coordinateType: 0,
          //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
          range: [0, 100000],
          //折线颜色
          color: "#51F2FF",
          //线宽，单位：米，默认值20
          thickness: 1,
          //亮度，取值范围：[0~1000]，默认值：0.5
          intensity: 5,
          //流速，取值范围：[0~1.0]，默认值：0.5
          flowRate: 1,
          //样式，0：直线， 1：曲线，注意：设置为曲线坐标点多的时候会非常影响添加添加效率
          shape: 0,
          //是否做深度检测，默认为true，true会被遮挡，false不会被遮挡
          depthTest: false,
          //折线样式，箭头/光流/贴地/实线/虚线等，取值范围：[0~7]，详情参考 PolylineStyle
          style: PolylineStyle.Normal,
          //材质贴图平铺比例
          tiling: 0,
        };
        let pArr = [];
        pArr.push(ployLine);
        await __g.polyline.add(pArr);
      }
    },
    //重置
    clearPolygonAll() {
      __g.polygon.clear();
      __g.polyline.clear();
      this.coordinate_x = "";
      this.coordinate_y = "";
      this.coordinate3_x = "";
      this.coordinate3_y = "";
      this.coordinate3_z = "";
      this.coordinates = [];
      this.coordinates3 = [];
      this.coordinates3_output = [];
    },
    //生成坐标，需要清空ps数组和显示页面
    async countCoordinate3s() {
      this.addPolygon_flag = false;
      //清空计算坐标数组
      this.coordinates3_output = [];
      for (let i = 0; i < this.coordinates3.length; i++) {
        //存放计算一个面的坐标的集合
        let pc = [];
        //以一个带选线坐标的面为完成面
        // pc.push(this.coordinates3[i]);
        if (i === 0) {
          //第一个点的完成面以第一个点和第二个点为基准
          for (let j = 0; j < this.coordinates.length; j++) {
            let A = this.coordinates3[0];
            let B = this.coordinates3[1];
            let P = this.coordinates[j];
            let x = P[0];
            let y = P[1];
            let p = this.countCoordinate3_first(A, B, x, y);
            pc.push(p);
          }
        } else {
          for (let j = 0; j < this.coordinates.length; j++) {
            let A = this.coordinates3[i - 1];
            let B = this.coordinates3[i];
            let P = this.coordinates[j];
            let x = P[0];
            let y = P[1];
            let p = this.countCoordinate3(A, B, x, y);
            pc.push(p);
          }
        }
        this.coordinates3_output.push(pc);
      }
    },
    //二维转三维坐标，以平面为基准，第一个点和其他点的计算方向不一样
    countCoordinate3_first(A, B, x, y) {
      let dx = B[0] - A[0];
      let dy = B[1] - A[1];
      let len = Math.sqrt(dx * dx + dy * dy);
      let p = [];
      p[0] = A[0] + (dy * x) / len;
      p[1] = A[1] - (dx * x) / len;
      p[2] = A[2] + y;
      return p;
    },
    countCoordinate3(A, B, x, y) {
      let dx = B[0] - A[0];
      let dy = B[1] - A[1];
      let len = Math.sqrt(dx * dx + dy * dy);
      let p = [];
      p[0] = B[0] + (dy * x) / len;
      p[1] = B[1] - (dx * x) / len;
      p[2] = B[2] + y;
      return p;
    },
    //生成图形
    addPolygon_1() {
      //单面数组
      let plane = [];
      //j遍历选线的所有点
      for (let j = 0; j < this.coordinates3.length - 1; j++) {
        //i遍历二维面的所有点
        for (let i = 0; i < this.coordinates3_output[0].length - 1; i++) {
          //取两点之间的两个面的点集合
          let A = this.coordinates3_output[j];
          let B = this.coordinates3_output[j + 1];
          //绘制面
          plane.push([A[i], A[i + 1], B[i + 1], B[i]]);
        }
      }
      this.addPolygon_2(plane);
      __g.polyline.clear();
    },
    async addPolygon_2(plane) {
      //对象数组
      let pArr = [];
      for (let i = 0; i < plane.length; i++) {
        let color = "";
        if (i % 2 === 0) {
          color = "#00FFFF";
        } else {
          color = "#DEB887";
        }
        let a = {
          id: i,
          coordinates: plane[i],
          coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          range: [1, 100000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
          color: color, //多边形的填充颜色
          frameColor: Color.Blue, //边框颜色
          frameThickness: 0, //边框厚度
          intensity: 1, //亮度
          style: PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
          depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
          // material: "/JC_CustomAssets/PolygonLibrary/Exhibition/平面_5", //自定义材质路径 设置后style相关参数会失效
          // scalarParameters: [{"name": "亮度", "value": 0.5}],  //材质数值类型参数
          // vectorParameters: [{"name": "颜色", "value": [0, 1, 0]}], //材质数组类型参数
        };
        pArr.push(a);
      }
      await __g.polygon.add(pArr);
      __g.polygon.focus("0", 50);
    },
    clearPolygon() {
      __g.polygon.clear();
      __g.polyline.clear();
    },

    changePageDelMarker() {
      if (this.markerIds.length > 0) {
        __g.marker.delete(this.markerIds);
      }
      this.markerIds = [];
    },
    changePageDelCar() {
      if (this.carIds.length > 0) {
        __g.vehicle.delete(this.carIds);
      }
      this.carIds = [];
    },
    //车辆
    carEdt() {
      if (this.titleIndex === "" || this.pageIndex === "") {
        this.$message.warning("请选择页面");
      } else {
        this.showInfoTree = false;
        this.showPageEdt = false;
        this.showCarEdt = true;
        this.showMarkerEdt = false;
        this.showTourEdt = false;
        this.showFastLine = false;
        this.showPolylinePopup = false;
        this.showPolygonPopup = false;
        this.showAnimationImage = false;
        this.showAnalysisTools = null
      }
    },

    //鼠标修复
    setRenderedCursorVisible() {
      __g.settings.setRenderedCursorVisible(false);
    },
    //路由跳转
    redirectToReport() {
      this.setClickFalse();
      this.$router.push("/report");
    },

    test() {
      console.log(window.location)
      return this.$message.warning("努力开发中");
    },

    base64ImgtoFile(dataurl, filename = "file") {
      return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = dataurl;
        image.crossOrigin = "anonymous";
        image.onload = () => {
          const canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          const context = canvas.getContext("2d");
          context.drawImage(image, 0, 0);
          canvas.toBlob((blob) => {
            const file = new File([blob], `${filename}.png`, {type: "image/png"});
            resolve(file);
          }, "image/png", 0.1);
        };
        image.onerror = (error) => reject(error);
      });
    },
    async convertBase64ToPNG(dataurl, fileName) {
      try {
        return await this.base64ImgtoFile(dataurl, fileName);
      } catch (error) {
        console.error(error);
      }
    },
    // 存储数据到服务端
    async generateImages(file, i, j) {
      const formData = new FormData();
      formData.append('image', file);
      return axios.post(this.$demo + "/uploadImageCamera", formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log("ok", response.data);
        this.titleLists[i].pageLists[j].pageUrl = this.$demoFile + response.data
      }).catch(error => {
        console.error(error);
      });
    },
    // 保存数据
    async handleSaveMap(base64, i, j) {
      console.log("title", i + 1, "page", j + 1)
      const timestamp = new Date().getTime();
      // 转换当前base64图片数据为png
      let image = await this.convertBase64ToPNG(base64, timestamp);
      // 存储到服务端
      if (image) {
        await this.generateImages(image, i, j);
      }
    },
    async base64ToPngBeforeSave(titleLists) {
      let loadingInstance = Loading.service({
        lock: true,
        text: "保存中，请稍后，请勿关闭页面...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (let i = 0; i < titleLists.length; i++) {
        for (let j = 0; j < titleLists[i].pageLists.length; j++) {
          if (titleLists[i].pageLists[j].pageUrl.startsWith('data:image/')) {
            await this.handleSaveMap(titleLists[i].pageLists[j].pageUrl, i, j)
          }
        }
      }
      loadingInstance.close();
    },
    /*
     * 接口方法
     * */
    post() {
      const name = this.savedText;
      axios.post(this.$demo + "/checkName", {}, {params: {name: name}}).then(async (response) => {
        console.log(response)
        if (response.data === 0) {
          await this.base64ToPngBeforeSave(this.titleLists)
          this.titleLists.push()
          nextTick(() => {
            const data = {
              title: this.titleLists,
              tour: this.reportTour
            };
            axios.post(this.$demo + "/post", {data}, {params: {name: name}}).then((response) => {
              console.log(response.data);
              this.$message.success("保存成功");
              console.log(this.titleLists)
              this.reportPlanName = this.savedText;
              this.showBCFA = false;
            }).catch((error) => {
              console.error(error);
            });
          });
        } else {
          console.log(response.data);
          this.$message.error("该名称已存在！");
        }
      }).catch((error) => {
        console.error(error);
      });
    },
    async edt(name) {
      const nameNew = this.savedText;
      await this.base64ToPngBeforeSave(this.titleLists)
      this.titleLists.push()
      nextTick(() => {
        const data = {
          title: this.titleLists,
          tour: this.reportTour
        };
        axios.post(this.$demo + "/edt", {data}, {params: {nameNew: nameNew, name: name}}).then((response) => {
          console.log(response.data);
          if (response.data === "edt") {
            this.$message.success("保存成功");
            this.reportPlanName = nameNew;
            this.showBCFA = false;
          }
        }).catch((error) => {
          console.error(error);
        });
      });
    },

    /*
     * 事件响应
     * */
    onKeyDown(event) {
      // 检测按下的键
      // console.log(event.key)
      if (event.key === "Escape") {
        this.clearClip();
        __g.tools.stopMeasurement();
        this.stopFXGJ();
      }
    },
    onMouseDown(event) {
      // console.log(event.which)
    },

    convertArrayToIntegers(floatArray) {
      return floatArray.map(num => Math.round(num));
    },
    copyToClipboard(text) {
      const el = document.createElement('textarea');
      el.value = text;
      el.setAttribute('readonly', '');
      el.style.position = 'absolute';
      el.style.left = '-9999px';
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
    },
    /*
     * 非工具的初始化方法
     * */
    async addPolylineInit() {
      let pArr = [];
      initApiData.lineArr.forEach((item, index) => {
        let p1 = {
          id: item.id, //折线唯一标识id
          coordinates: item.pointArr, //构成折线的坐标点数组
          coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          range: [10000, 100000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
          color: item.color, //折线颜色
          thickness: 300, //折线宽度
          intensity: 5, //亮度
          flowRate: 0.5, //流速
          shape: 0, //折线类型 0：直线， 1：曲线
          depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
          style: PolylineStyle.OnTerrain, //折线样式 参考样式枚举：PolylineStyle
          tiling: 1, //材质贴图平铺比例
        };
        pArr.push(p1);
      });
      await __g.polyline.add(pArr);
    },
    async addMarkerInit() {
      let path = window.location.host;
      let allMarkArr = [];
      initApiData.markerArr.forEach((item, index) => {
        let one = {
          id: item.id,
          groupId: "markerName",
          coordinate: item.coordinate, //坐标位置
          coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          anchors: [0, 0], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
          range: [20000, 100000], //可视范围

          text: item.text, //显示的文字
          useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
          textRange: [1, 3000], //文本可视范围[近裁距离, 远裁距离]
          textOffset: [0, 0], // 文本偏移
          textBackgroundColor: item.color, //文本背景颜色
          fontSize: 22, //字体大小
          fontOutlineSize: 1, //字体轮廓线大小
          fontColor: "#FFFFFF", //字体颜色
          fontOutlineColor: "rgba(0,0,0,0)", //字体轮廓线颜色

          showLine: false, //标注点下方是否显示垂直牵引线

          autoHidePopupWindow: true, //失去焦点后是否自动关闭弹出窗口
          autoHeight: false, // 自动判断下方是否有物体
          displayMode: 2, //智能显示模式  开发过程中请根据业务需求判断使用四种显示模式
          clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
          priority: 0, //避让优先级
          occlusionCull: false, //是否参与遮挡剔除
        };
        allMarkArr.push(one);
      });
      await __g.marker.add(allMarkArr);
    },
    async initPlayer() {
      let host = this.$globalVariable;
      let _onReady = async () => {
        await this.getInfoTree()
        this.$refs.infoTree.setCheckedKeys(['ProjectTree_Root', 'plant'], false);
        // if (this.titleIndex === "" || this.pageIndex === "") {
        //   await this.hideInfoTreeIds(initApiData.hide_ids)
        //   await this.showInfoTreeIds(initApiData.show_ids)
        // }
        this.getSliderTime()
        __g.polyline.clear();
        __g.marker.clear();
        __g.polyline.clear();
        __g.polygon.clear();
        __g.vehicle.clear();
        this.stopFXGJ()
        __g.tools.stopMeasurement();
        __g.tileLayer.stopHighlightAllActors();
        __g.customObject.unhighlight();
        __g.settings.setMousePickMask(7);
      };
      let _onEvent = async (event) => {
        let eventType = event.eventtype; //事件类型 参考交互事件类型枚举对象
        let id = event.Id; //图层id
        let objectId = event.ObjectID;
        let groupId = event.GroupID;
        let oId = event.OID;
        let modelName = event.ModelName;
        let propertyName = event.PropertyName;
        let name = event.Name;
        let type = event.Type;
        let userData = event.UserData;
        let objectLocation = event.MouseClickPoint; //当前点击位置
        let coordinates = event.coordinates //绘制//平面
        let coordinate = event.Coordinate//坐标
        let perimeter = event.Perimeter//周长//平面
        let area = event.Area//地面
        let startCoordinate = event.StartCoordinate//垂直起点//直线
        let endCoordinate = event.EndCoordinate//垂直终点//直线
        let verticalCoordinate = event.VerticalCoordinate//垂直直角点
        let horizontalLength = event.HorizontalLength
        let verticalHeight = event.VerticalHeight
        let length = event.Length//直线长度
        if (eventType === 'LeftMouseButtonClick') {
          console.log(event);
        }
        switch (eventType) {
          case "LeftMouseButtonClick": // 鼠标左键点击时触发方法
            let x = objectLocation[0];
            let y = objectLocation[1];
            let z = objectLocation[2];
            let xyz = [x, y, z];
            // console.log(objectLocation);
            //剖切响应
            if (this.VolumeClip_flag) {
              this.volumeClip_event(x, y, z);
              break;
            }

            //竖剖
            if (this.PlaneClip_flag) {
              await this.planeClip_event(x, y, z);
              break;
            }

            //项目展示
            if (type === "marker" && id.length < 20) {
              switch (id) {
                case "marker-jiaHua":
                  __g.camera.set(
                      -813427.618594,
                      3347652.033125,
                      813.964844,
                      -42.672722,
                      -28.507675,
                      3
                  );
                  break;
                case "marker-eGongYan":
                  __g.camera.set(
                      -811964.039375,
                      3343669.3225,
                      751.795859,
                      -42.786121,
                      -123.594261,
                      3
                  );
                  break;
                case "marker-caiJia":
                  __g.camera.set(
                      -814568.009575,
                      3364531.490391,
                      917.150547,
                      -40.854332,
                      15.121278,
                      3
                  );
                  break;
                case "marker-nanJiMen":
                  __g.camera.set(
                      -808727.226406,
                      3345868.819063,
                      760.817188,
                      -38.742229,
                      -49.713428,
                      3
                  );
                  break;
                case "marker-cunTan":
                  __g.camera.set(
                      -804978.094688,
                      3353737.951875,
                      1261.426875,
                      -53.57439,
                      -82.278275,
                      3
                  );
                  break;
                default:
                  break;
              }
            }

            //选线的点选响应
            if (this.addPolygon_flag) {
              await this.addPolygon_event(x, y, z);
            }

            //水淹分析，存两个点，一个起点和终点
            if (this.startFloodFill_flag) {
              this.startFloodFill_flag = false;
              this.$refs.floodFillPopupRef.addFloodFill(x, y, z)
              break;
            }

            if (this.startFluid_flag) {
              this.startFluid_flag = false;
              await this.$refs.fluidSimulationPopupRef.addFluidSimulation(objectLocation)
              break;
            }

            //标签
            if (this.markerFlag) {
              this.markerFlag = false;
              await this.$refs.showMarkerEdtPopupRef.addMarkerEdt(objectLocation);
              break;
            }

            //车辆
            if (this.carFlag) {
              this.carFlag = false;
              await this.$refs.showCarEdtPopupRef.addVehicleEdt(objectLocation);
              break;
            }

            break;

          case "EditHelperFinished":
            if (this.showCarEdt) {
              await this.$refs.showCarEdtPopupRef.addCarWays(coordinates);
              break;
            }
            if (this.showPolylinePopup) {
              await this.$refs.polylinePopupRef.addPolyline(coordinates);
              break;
            }
            if (this.showPolygonPopup) {
              await this.$refs.polygonPopupRef.addPolygon(coordinates);
              break;
            }
            break;

          case "Measurement":
            switch (type) {
              case "Coordinate"://坐标
                this.$notify({
                  title: '坐标（四舍五入整数）',
                  message: this.convertArrayToIntegers(coordinate),
                  type: 'success',
                  duration: 10000,
                  offset: 100
                });
                this.copyToClipboard(coordinate)
                break;
              case "Polyline"://线段
                this.$notify({
                  title: '直线总长',
                  message: perimeter + 'm',
                  type: 'success',
                  duration: 10000,
                  offset: 100
                });
                this.copyToClipboard(perimeter)
                break;
              case "HorizontalLine"://直线
                this.$notify({
                  title: '水平长度',
                  message: length + 'm',
                  type: 'success',
                  duration: 10000,
                  offset: 100
                });
                this.copyToClipboard(length)
                break;
              case "VerticalLine"://垂直
                this.$notify({
                  title: '垂直线',
                  message: '高度:' + verticalHeight + 'm' + ' , ' + '长度:' + horizontalLength + 'm',
                  type: 'success',
                  duration: 10000,
                  offset: 100
                });
                this.copyToClipboard('高度:' + verticalHeight + ',长度:' + horizontalLength)
                break;
              case "Area"://平面
                this.$notify({
                  title: '平面',
                  message: '周长:' + perimeter + 'm' + ' , ' + '面积:' + area + '㎡',
                  type: 'success',
                  duration: 10000,
                  offset: 100
                });
                this.copyToClipboard('周长:' + perimeter + ',面积:' + area)
                break;
              case "TerrainArea"://地面
                this.$notify({
                  title: '地面面积',
                  message: area + '㎡',
                  type: 'success',
                  duration: 10000,
                  offset: 100
                });
                this.copyToClipboard(area)
                break;
              default:
                break;
            }
            break;

          case "MouseHovered":
            if (type === 'TileLayer' && objectId && this.allowedHover && this.highlightOpen) {
              this.highlight_flag = true
              __g.tileLayer.highlightActor(id, objectId);
            }
            break;

          case "MouseMoved":
            if (this.highlight_flag) {
              __g.tileLayer.stopHighlightAllActors();
              __g.customObject.unhighlight();
              this.highlight_flag = false
            }

            break;

          default:
            break;
        }
      };
      let options = {
        //必选参数，网页显示视频流的dom节点id
        domId: "player",
        //必选参数，二次开发时必须指定，否则无法进行二次开发
        apiOptions: {
          //必选回调函数，视频流加载完成回调函数
          onReady: _onReady,
          //可选回调函数，视频流事件交互回调函数
          onEvent: _onEvent,
        },
        ui: {
          startupInfo: false, //默认值为true，初始化过程中是否显示左上角详细信息（如果不需要，直接去掉此属性即可）
          statusIndicator: false, //默认值为true，左上角闪烁的状态指示灯，可以从不同的颜色看出当前的状态
          statusButton: false, //默认值为false，是否在左下角显示信息按钮（如果不需要，直接去掉此属性即可）
          fullscreenButton: false, //默认值为false，是否在右下角显示全屏按钮（如果不需要，直接去掉此属性即可）
          homeButton: false, //默认值为false，是否在左下角显示“回到初始位置”按钮（如果不需要，直接去掉此属性即可）
          taskListBar: 1, //默认值为1，是否在下方显示“任务队列（API调用队列）”信息（0: 永不显示；1: 执行比较耗时的操作时显示；2: 一直显示）
          debugEventsPanel: false, //是否显示事件详细信息（仅用于调试）
          mainUI: false, //是否显示Cloud的UI工具栏，如果设置为true就显示，如果设置为false就隐藏，如果没有设置，就保持原状。
          campass: false, //是否显示指北针，如果设置为true就显示，如果设置为false就隐藏，如果没有设置，就保持原状。
        },
        keyEventTarget: "video",
        // 'actionEventHander': actionEventHander,
      };
      __g = new DigitalTwinPlayer(host, options).getAPI();
    },
  },
  created() {
    // 通过 $route 对象获取参数
    if (this.$route.query.id === "edt") {
      console.log("edt");
      let data = JSON.parse(this.$route.query.data)
      console.log(data)
      this.titleLists = data.title;
      this.reportTour = data.tour;
      this.reportPlanName = this.$route.query.name;
      this.reportKey = this.$route.query.name;
      for (let i = 0; i < this.titleLists.length; i++) {
        this.titleLists[i].showTitlePage = false;
        this.titleLists[i].titleClassNow = "";
        this.titleLists[i].iconClass =
            "body-title-icon ri-arrow-drop-right-line";
      }
    } else {
      console.log("new");
      this.reportKey = "new";
      this.reportPlanName = "未命名";
    }
  },
  mounted() {
    // 监听全局按键事件
    document.addEventListener("keydown", this.onKeyDown);
    document.addEventListener("mousedown", this.onMouseDown);
    this.initPlayer();
  },
  destroyed() {
    //关闭云渲染并释放资源
    __g.destroy();
  },
  beforeDestroy() {
    //关闭云渲染并释放资源
    __g.destroy();
    // 在组件销毁前移除事件监听器，防止内存泄漏
    document.removeEventListener("keydown", this.onKeyDown);
    document.removeEventListener("mousedown", this.onMouseDown);
  },
};
</script>